react路由配置react-router-dom v6版本
一、基础配置
npm install react-router-dom -S
- src目录下创建router文件夹;
- router文件夹下创建index.jsx;
/router/index.jsx:
import {
Routes, Route } from react-router-dom;
// Routes 就是v5版本的 Switch
import PageA from ./PageA; // 页面A
import PageB from ./PageB; // 页面B
export default function App(){
// 启动服务 访问 /pageA 就是【页面A】
return (
<Routes>
<Route path=/pageA element={
<PageA />} />
<Route path=/pageB element={
<PageB />} />
</Routes>
)
}
页面A：(页面B)
import React from react;
export default function index() {
return (
<div>
<h1>PageA</h1>
</div>
)
}
App.jsx
-
这个页面主要是将写好的路由放进来，展示对应路由的页面，同时配置Link 跳转的按钮
import React, {
useState } from react;
import {
Link, HashRouter } from react-router-dom;
import RouterConfig from ./src/router
export default function App(props) {
return (
<div>
// 最外层包裹 HashRouter 标签，否则下面 Link标签 会报错
// 这里包裹里 HashRouter 标签后，router文件夹下的index.jsx里面的 HashRouter 标签就可以去掉了
<HashRouter>
<div>
// 这里配置跳转的按钮 Link标签和 a标签作用一样，但是a标签记得加#
<Link to=/pageA>PageA页面</Link>
<Link to=/pageB>PageB页面</Link>
</div>
// 这里展示对应路由页面
{
<RouterConfig />}
</HashRouter>
</div>
);
}
二、进阶配置
完整路由配置&模块化处理
-
src下创建router文件夹，router文件夹下分别创建 index.jsx & routerList.jsx； 通过下列配置后将router/index.jsx 引入到 App.jsx 中即可，所有的新增页面都可以通过 routerList.jsx 统一配置去实现路由；
index.jsx配置
import React from react;
import {
HashRouter, Routes, Route, Navigate } from react-router-dom;
import {
otherRouter, pageRouter } from ./routerList;
const allRouter = [...pageRouter, ...otherRouter];
export default function index() {
// 提前封装好的路由配置函数
const renderRouter = (router) =>
router.map((item, index) =>
item.path ? (
<Route
key={
index}
path={
item.path}
element={
item.element}
{
...(item.props = {
})}
>
{
item.children && renderRouter(item.children)}
</Route>
) : (
<Route
key={
index}
path={
item.from}
element={
<Navigate to={
item.to} replace />}
/>
)
);
return (
<HashRouter>
<Routes>{
renderRouter(allRouter)}</Routes>
</HashRouter>
);
}
routerList.jsx配置
import Home from ../pages/Home;
import Login from ../pages/Login;
import List from ../pages/List;
const otherRouter = [
{
path: /404,
title: 未找到页面,
element: <NotFound />
},
{
from: *,
to: /404
}
];
const pageRouter = [
{
path: /,
title: 仪表盘,
element: <Home />
},
{
path: /dashboard,
title: 仪表盘,
element: <Home />
},
{
path: /login,
title: 用户登陆,
element: <Login />
},
{
path: /list,
title: 列表,
element: <List />
}
];
export {
otherRouter, pageRouter };