react-router-dom 6版本

react-router-dom 6 升级后，相对于 5 版本的改动： 

1. Switch标签替换成了----> Routes标签；
2.  命名视图：Route 标签属性component替换成了----> element；
3.重定向：Redirect标签替换成了----> Navigate标签；
4.NavLink标签activeClassName属性替换成了小写字母--->activeclassname；
5.取消了 withRouter

总体思路：

ReactDOM.render(
  <BrowserRouter>
    <App>
      {/* 命名路由 */}
      <div class="menu">
        <NavLink activeclassname="active" to="/task">路由一</NavLink>
        <NavLink activeclassname="active" to="/order">路由二</NavLink>
      </div>

      {/* 命名视图 */}
      <div class="content">
        <Routes>
          <Route path="/task" element={<Task/>}></Route>
          <Route path="/order" element={<Order/>}></Route>
          <Route path="*" element={<Navigate to="/task" />} />
        </Routes>
      </div>
    </App>
  </BrowserRouter>,
  document.getElementById('root')
)

完整版：

index.js:

import App from './App'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'

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

App.js:

import React, { Component } from 'react'
import { Route, Routes } from 'react-router-dom'

import PageTop from './components/PageTop/PageTop'
import Menu from './components/Menu/Menu'
import Task from './pages/task/task'
import Order from './pages/order/order'

import './App.css'

export default class App extends Component {

  render () {
    return (
      <div className="app-container">
        <PageTop className="page-top"/>

        {/* 左侧菜单栏 */}
        <Menu className="menu"/>

        <div className="content">
         {/* 命名视图 */}
          <Routes>
            <Route className="menu-item" path="/order" element={<Order/>}/>
            <Route className="menu-item" path="/task" element={<Task/>}/>
          </Routes>
        </div>
      </div>
    )
  }
}

Menu.jsx: 

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import './Menu.css'

export default class Menu extends Component {

  state = {
    menuList: [
      { name: '订单管理', route: '/order' },
      { name: '任务管理', route: '/task' }
    ]
  }

  render() {
    const { menuList } = this.state
    return (
      <div className="menu">
        {
          menuList.map((item, index) => {
            return (
              // 命名路由
              <NavLink className="menu-link" activeclassname="active" key={index} to={item.route}>
                <div className="menu-item" key={index}>{item.name}</div>
              </NavLink>
            )
          })
        }
      </div>
    )
  }
}

路由组件 VS 一般组件