react 配置react-router

项目接口（页面）

一、路由(路由、路由拦截)
1.新建router文件
1.1 新建routes.jsx

import React from 'react'
const routes = [
  {
    path: '/',
    component: () => import('@/page/Index'),
    children: [
      {
        path: '/',
        redirect: '/home',
      },
      {
        path: '/home',
        component: () => import('@/page/Home'),
        meta: {
          title: "首页",
        }
      },
      {
        path: '/about',
        component: () => import('@/page/Other'),
        meta: {
          title: "关于",
        }
      },
    ]
  }
]
export default routes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

1.2 新建index.js

import { useRoutes, Navigate, useNavigate } from “react-router-dom”;
import React, { Suspense } from ‘react’
import routes from ‘./routes’

// 路由处理方式

const generateRouter = (routers) => {
  return routers.map((item) => {
    let res = { ...item };
    if (!item?.path) return;

    // component
    if (item?.component) {
      const Component = React.lazy(item.component);
      res.element = (<React.Suspense fallback={<div>加载中...</div>}>
        <BeforeEach route={item}>
          <Component />
        </BeforeEach>
      </React.Suspense>);
    }

    // children
    if (item?.children) {
      res.children = generateRouter(item.children);
    }

    // 重定向
    if (item?.redirect) {
      res.element = (
        <Navigate to={item.redirect} replace />
      )
    }

    return res;
  })
}
function BeforeEach (props) {
  if (props?.route?.meta?.title) {
    document.title = props.route.meta.title;
  }

  if (props?.route?.meta?.needLogin) {
    // 看是否登录
    // const navigate = useNavigate();
    // navigate('/login');
  }

  return <div>
    {props.children}
  </div>
}
const Router = () => useRoutes(generateRouter(routes))

export default Router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

1.3 修改mian.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from "react-router-dom";
import './assets/index.module.scss'
import Router from './router/index'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  </React.StrictMode>
)
1
2
3
4
5
6
7
8
9
10
11
12
13

二、路由

1. 路由重定向

编写重定向组件，在组件内部实现路由的跳转，从而实现路由的重定向
redirect.jsx

import { useEffect } from 'react';
import { useNavigate, Navigate } from 'react-router-dom';

export function Redirect ({ to, replace, state }) {
  const navigate = useNavigate();

  useEffect(() => {
    navigate(to, { replace, state });
  });

  return null;
}
1
2
3
4
5
6
7
8
9
10
11
12

怎么使用呢？判断一下如果是重定向

<Route path="/" element={<Redirect to="/home" />} />
1

2. 路由传参
   react router v6 获取传参需要用两个 hook，分别是 useParams（params）和 useSearchParams（search）
   2.1 useParams
   params 传参

import { NavLink } from 'react-router-dom';

{/* 路由定义 /article/:id */}  
<NavLink to={`/Other/1`}>文章1</NavLink>
1
2
3
4

接收参数

import { useParams } from 'react-router-dom'

/* params */
const params = useParams();
const { id } = params;
1
2
3
4
5

2.2 useSearchParams
search 传参

import { NavLink } from 'react-router-dom';

<NavLink to={`/Home?id=1`}>文章1</NavLink>
1
2
3

接收参数

import { useSearchParams } from 'react-router-dom'

/* search */
let [searchParams, setSearchParams] = useSearchParams();
const { id } = searchParams;
1
2
3
4
5

2.3 useLocation
state 传参

import { NavLink } from 'react-router-dom';

<NavLink to="/Home" state={{ id: 1 }}>文章1</NavLink>
1
2
3

接收参数

import { useLocation } from 'react-router-dom'

let location = useLocation();
const { id } = location.state;
1
2
3
4

2.4 编程式路由跳转 useNavigate

import { FC, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from 'antd';

interface IndexProps{}

const Index=() => {
    const navigate = useNavigate();
    // 返回
    const handleBack = () => navigate(-1);
    // 前进
    const handleForward = () => navigate(1);
    // 刷新
    const handleRefresh = () => navigate(0);
    //

    return <>
        <Button type="primary" onClick={handleBack}>返回</Button>
        <Button type="primary" onClick={handleForward}>前进</Button>
        <Button type="primary" onClick={handleRefresh}>刷新</Button>
        {/* 跳转路由 */}
        <Button type="primary" onClick={() => navigate('/Other/1', { replace: true })}>params</Button>
        <Button type="primary" onClick={() => navigate('/Other?id=1', { replace: true })}>search</Button>
        <Button type="primary" onClick={() => navigate('/Other', { replace: true, state: { id: 1 } })}>state</Button>
    </>
}

export default Index;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

三、新建page文件

1.新建Index.jsx (例子查看)

import React from 'react';
import Home from './Home'
const Index = () => {
  return (
    <div>
      152535
      <Home></Home>
    </div>
  );
};

export default Index;
1
2
3
4
5
6
7
8
9
10
11
12

完成