react路由

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';

 /* 
     * 1. React路由模式有两种： 
         1. HashRouter[ #/home 传统浏览器模式 hashchange ]  
         2. BrowserRouter[ /home  h5 history模式 ]
     * 2. BrowserRouter需要后端支持
     * 3. as的作用是给一个模块起一个别名
 */
 import { BrowserRouter as Router } from 'react-router-dom'

 ReactDOM.render(
 <Router>
     <App />
 </Router>
 , document.getElementById('root'));

 serviceWorker.unregister();

在Layout组件中
import { Route,Switch,Redirect,withRouter } from ‘react-router-dom’

 <Switch>
                     <Redirect from = "/" to = "/home" exact/> //重定向
                     <Route path = "/home" component = { Home }/>
                     <Route path = "/recommend" component = { Recommend }/>
                     <Route path = "/category" component = { Category }/>
                     <Route path = "/shopcar" component = { ShopCar }/>
                     {/* <Route path = "/mine" component = { Mine }/> */}
                     {/* <Route path = "/mine" render = {() => <Mine name = { name } />}/> */}
                     <Route path = "/mine" children = {() => <Mine name = { name } />}/>
                     <Route path = "/login" component = { Login } />
                     <Route path = "/register" component = { Register } />
                     <Route path = "/list/:id" component = { List } /> //路由传参
                     <Route path = "/detail/:id" component = { Detail } />
                     <Route  component = { NotFound }/> //404错误路由
</Switch>

通过Link LinkNav 的to属性跳转

import {Link,LinkNav} from ‘react-router-dom’

 <li><NavLink to="/home"><b className="fas fa-home" ></b><i>首页</i></NavLink></li>
 to还可以写成对象
 to={{
      pathname:'',
      search:'';//路由传参
 }}