React+hash路由原理reactrouer分为三部分:react-router/react-router-dom(

npx create-react-app demo-app
cd demo-app
npm install react-router-dom

reactrouer分为三部分: react-router/ react-router-dom (web网页)/react-router-native (native移动端)

路由原理:

1hash:

1a标签herf值改变hash值

 <li><a href="#/home">首页</a></li>

2:给hash设定初始值

this.state={
           hash:window.location.hash
        }

3:(核心),在对应的钩子函数中监听window中hash值的变化,发生变动的时候,将更新的hash值赋值给hash

componentDidMount(){
        window.addEventListener('hashchange',()=>{
            this.setState({
                hash:window.location.hash
            })
        })
}

4:申明一个变量 RouteView ,对hash值做判断,给符合条件的hash值,赋值对应的组件(顺便设置默认)

 let RouteView;
        switch (this.state.hash){
            case '#/home':
                RouteView=<Home/>;
                break;
            case '#/list':
                RouteView=<List/>;
                break;
            default:
                RouteView=<Home/>;
                break;
        }

5:在父组件中映射对应子组件

  {RouteView}