React新版本路由

与老版本5.x对比

1. 内置组件的变化：移除<Switch/> ，新增 <Routes/>
2. 语法：component={组件} ==>  element={<组件/>}
3. 新增hook：useParams、useNavigate、useMatch

history和哈希的使用和5.x版本一样

<BrowserRouter>

<HashRouter>

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

App.jsx 中

import React from 'react'
import { NavLink, Routes, Route } from 'react-router-dom'
import Page1 from './pages/Page1'
import Page2 from './pages/Page2'export default function App() {return (<div>{/* 路由链接 */}<NavLink className="list-group-item" to="/Page1">Page1</NavLink><NavLink className="list-group-item" to="/Page2">Page2</NavLink>{/* 注册路由 */}<Routes><Route path='/Page1' element={<Page2/>} /><Route path='/Page2' element={<Page2/>} /></Routes></div>)
}

<Switch>被移除，替代者：<Routes>
<Routes>和<Switch>一样，如果匹配上了，往下就不会再匹配了，相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。
<Routes> 和 <Route>要配合使用，且必须要用<Routes>包裹<Route>。
<Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 false）。
当URL发生变化时，<Routes> 都会查看其所有子 <Route> 元素以找到最佳匹配并呈现组件 。
<Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 <Outlet> 组件来渲染其子路由。

src/routes/index.js

export default [// 路由表{path: '/Page1 ',element: <Page1 />},{path: '/Page2',element: <Page2 />},{path: '/',element: <Navigate to='/Page2' />},{path: '/home',element: <Home />,children: [{path: 'news',element: <News />},{path: 'message',element: <Message />}]},]

App.jsx

import React from 'react'
import { useRoutes } from 'react-router-dom'
import routes from './routes/index';export default function App() {const element = useRoutes(routes)return (<div>{element}</div>)
}

Home.jsx

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom';export default function Home() {return (<div><div><NavLink className="list-group-item" to="news">News</NavLink><NavLink className="list-group-item" to="message">Message</NavLink>{/* 指定路由组件呈现的位置 */}<Outlet /></div></div>)
}

在v5中，NavLink高亮使用组件标签中的activeClassName属性，当你点击NavLink标签时，加哪个样式的类名, 在v6版本中，想要实现自定义的类名，需要把className的值写成一个函数。

再v6中使用路由懒加载 

import { lazy, Suspense } from "react";
...{path: ' ',element: (<Suspense fallback={<h2>加载中....</h2>}><lazy(() => import("../page/LazyTest"))/></Suspense>)},...