react-router-dom v6 的嵌套路由和路由参数传递

1. 安装

   npm install react-router-dom

2. 修改index.js

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   import {BrowserRouter} from 'react-router-dom'
   
   ReactDOM.render(
       <React.StrictMode>
           <BrowserRouter>
               <App/>
           </BrowserRouter>
       </React.StrictMode>,
       document.getElementById('root')
   )
   

3. 路由匹配

   import React, {Component} from "react"
   import {Route, Routes, Navigate, NavLink} from 'react-router-dom'
   import FirstIndex from "./component/FirstIndex/index"
   import MultilevelRoute from "./component/MultilevelRoute/index"
   import HistoryDemo from "./component/HistoryDemo/HistoryDemo"
   
   export default class App extends Component {
   
       render() {
           return (
               <div className="App">
                   <HistoryDemo></HistoryDemo>
                   <div>
                       <NavLink to="/index">Test1</NavLink>
                       <NavLink to="/multilevelRoute">MultilevelRoute</NavLink>
                   </div>
                   <div>
                       {/* react-router-dom v5使用 <Switch></Switch>*/}
                       {/* react-router-dom v6使用 <Routes></Routes>*/}
                       <Routes>
                           {/* react-router-dom v5使用 component={Test1}*/}
                           {/* exact={true} 开启严格匹配*/}
                           <Route exact={true} path="/index" element={<FirstIndex></FirstIndex>}></Route>
                           {/* react-router-dom v6嵌套路由需要在path最后加”/*”*/}
                           <Route path="/multilevelRoute/*" element={<MultilevelRoute></MultilevelRoute>}></Route>
                           {/*
                               react-router-dom v5 默认页设置:
                               <Redirect to="/index"></Redirect>
                           */}
                           {/* react-router-dom v6 默认页设置 */}
                           <Route element={<Navigate to="/index"/>}></Route>
                       </Routes>
                   </div>
               </div>
           );
       }
   }
   

4. 嵌套路由并传入参数

   import React, {Component} from 'react'
   import PropsRoute from "../PropsRoute/index";
   import {NavLink, Navigate, Route, Routes} from "react-router-dom";
   
   export default class MultilevelRoute extends Component {
   
       render() {
           return (
               <div>
                   <div>
                       <ul>
                           {/* 传参方式-params */}
                           <li><NavLink to="/multilevelRoute/paramsTest/1/11">prop-params</NavLink></li>
                           {/* 传参方式-search */}
                           <li><NavLink to="/multilevelRoute/searchTest?id=2&code=22">prop-search</NavLink></li>
                           {/*
                               react-router-dom v5 传参写法:
                               <NavLink to={{pathname:'/multilevelRoute/stateTest',state:{id:'3',code:33}}}>prop-               state</NavLink>
                           */}
                           {/* 传参方式-state */}
                           <li><NavLink to="/multilevelRoute/stateTest" state={{id:'3',code:33}}>prop-state</NavLink></li>
                       </ul>
                   </div>
                   <div>
                       <Routes>
                           {/*
                               react-router-dom v5写法 path = "全路径":
                               <Route path="/multilevelRoute/search" element={<PropsRoute></PropsRoute>}></Route>
                           */}
                           {/* 
                               react-router-dom v6写法
                            */}
                           <Route path="/paramsTest/:id/:code" element={<PropsRoute>params</PropsRoute>}></Route>
                           <Route path="/searchTest" element={<PropsRoute>search</PropsRoute>}></Route>
                           <Route path="/stateTest" element={<PropsRoute></PropsRoute>}></Route>
                           <Route path="/*" element={<Navigate to="/multilevelRoute/paramsTest/0/00" />}></Route>
                       </Routes>
                   </div>
               </div>
           )
       }
   }
   

5. 接收参数

   使用类式组件接收参数

   import React, {Component} from 'react'
   import qs from 'querystring'
   import {useParams, useLocation} from "react-router-dom";
   
   //命名格式xxxWithRouter
   function propsRouteWithRouter(PropsRoute) {
       return (props) => {
           let params = useParams();
           const search = qs.parse(useLocation().search.slice(1));
           const state = useLocation().state;
           params = Object.assign(params, search, state)
           return <PropsRoute {...props} params={params} />
       }
   }
   
   class PropsRoute extends Component {
   
       render() {
           /*
           react-router-dom v5 接收参数写法:
           this.props.match.params
           this.props.location.search
           this.props.location.state
           */
           // react-router-dom v6 接收参数写法
           // const search = window.location.search
           // console.log(qs.parse(search.slice(1)))
           //使用高级组件接收参数
           console.log(this.props.params)
           const {children} = this.props
           return (
               <div>
                   <h2>{children}</h2>
               </div>
           )
       }
   }
   export default propsRouteWithRouter(PropsRoute)
   

   使用函数式组件接收参数

   import qs from 'querystring'
   import {useParams, useLocation} from "react-router-dom";
   
   export default function PropsRoute(props) {
       const {children} = props
       console.log(useParams())
       console.log(qs.parse(useLocation().search))
       console.log(useLocation().state)
       return (
           <div>
               <h2>{children}</h2>
           </div>
       )
   }