与老版本5.x对比
- 内置组件的变化:移除
<Switch/>
,新增<Routes/>
- 语法:
component={组件}
==>element={<组件/>}
- 新增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";
const LazyTest = lazy(()=>import("../page/LazyTest"))
...
{
path: ' ',
element: (
<Suspense fallback={<h2>加载中....</h2>}>
<LazyTest/>
</Suspense>)
},
...