文章
关于我
文章
关于我

reactRouterV6 history模式的使用

React ReactRouter

演示了如何使用react-router-v6的history模式，并且加上路由守卫

安装

npm
yarn
pnpm
1npm install --save react-router-dom@6

使用

根页面包裹所有

1// index.tsx
2import { createRoot } from 'react-dom/client';
3import { BrowserRouter } from 'react-router-dom';
4import App from './App';
5import './index.scss';
6// 根路由需要被包裹
7const root = createRoot(document.getElementById('root') as HTMLElement);
8root.render(
9	<BrowserRouter>
10		<App />
11	</BrowserRouter>,
12);

App页面调用路由配置

1// App.tsx
2import { useRoutes } from 'react-router-dom';
3import './App.scss';
4//直接使用配置文件的路由
5import routesWithGuard from 'src/router/routesConfig';
6
7const App = () => {
8	const routes = routesWithGuard();
9	return <div className="App bg-gray-700 h-full">{useRoutes(routes)}</div>;
10};
11export default App;

配置文件

1//routesConfig.tsx
2import { Navigate } from 'react-router-dom';
3import NotFind from 'src/pages/404';
4import Home from 'src/pages/Layout';
5import PageTemplate from 'src/pages/Layout/PageTemplate';
6import { ExtendedRouteObject } from './type';
7/* ---HomeEnd---*/
8export default function routesWithGuard(): ExtendedRouteObject[] {
9    //这里可以改成自己的校验逻辑
10    const isLogin = !!localStorage.getItem('user_token');
11    return [
12        {
13        path: '/home',
14        element: isLogin ? <Home /> : <Navigate to="/user/login" />,
15        children: [
16                {
17                    path: 'PageTemplate',
18                    title: '页面模板',
19                    element: <PageTemplate />,
20                },
21                {
22                    path: '',
23                    element: <Navigate to="PageTemplate" replace />,
24                },
25            ],
26        },
27        {
28            path: '*',
29            element: <NotFind />,
30        },
31    ];
32}

路由导航

组件式

1import * as React from "react";
2import { Link } from "react-router-dom";
3
4function UsersIndexPage({ users }) {
5  return (
6    <div>
7      <h1>Users</h1>
8      <ul>
9        {users.map((user) => (
10          <li key={user.id}>
11            <Link to='user'>{user.name}</Link>
12          </li>
13        ))}
14      </ul>
15    </div>
16  );
17}

函数式组件中使用

1import { NavigateFunction, Outlet, useNavigate } from 'react-router-dom';
2function Layout() {
3	const navigate: NavigateFunction = useNavigate();
4	const loginOut = () => {
5		localStorage.clear();
6		navigate('/user/login');// 重定向到对应的路由
7	};
8	return (
9		<div className="layout-container h-full">
10			<button type="button" onClick={() => loginOut()}>
11				退出
12			</button>
13			<Outlet />
14		</div>
15	);
16}
17export default Layout;