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>*/}
                       {