React + 项目(从基础到实战) -- 第五期

多页面需要路由来管理
路由:类似网址
在开始之前 | React Router6 中文文档 (baimingxuan.github.io)

路由设计

页面对应的路由

• 首页 /

• 登录 /login

• 注册 /regitser

• 问卷管理

  • 我的问卷 /manage/list

  • 星标问卷 /manage/star

  • 回收站 /manage/trash

• 问卷详情

  • 编辑问卷 /question/edit/:id (动态路由)

  • 问卷统计 /question/stat/:id

• 404

实操

建页面组件

</ outlet> 类似vue< /slot>用于切换不同的路由

配置路由

• 新建 router文件夹下 index.tsx组件(注意是tsx)
• 配置路由出口

const router = createBrowserRouter([

    {

        path:'/',

        element: <MainLayout />,

        children:[

            {

                path:'/',

                element: <Home/>

            },

            {

                path:'login',

                element: <Login />

            },

            {

                path:'register',

                element: <Register />

            },

            {

                path:'manage',

                element: <ManageLayout />,

                children:[

                    {

                        path:'list',

                        element: <List />

                    },

                    {

                        path:'star',

                        element: <Star />

                    },

                    {

                        path:'trash',

                        element: <Trash />

                    },

                ]

            }

        ]

    },

  

    {

        path:'/question',

        element: <QuestionLayout />,

        children:[

            {

                path:'edi/:id', //动态参数

                element: <Edit />

  

            },

            {

                path:'stat/:id',

                element: <Stat />

  

            },

        ]

    },

  

  
  
  
  
  

    {

        path:"*", //404 路由配置,写在最后兜底

        element: <NotFound />

    }

  

])
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

import { RouterProvider } from "react-router-dom"

import routerConfig from "./router"

  
  
  

function App() {

  

  return <RouterProvider router={routerConfig}></RouterProvider>

}

  

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

传递动态参数的写法

实现跳转

路由跳转

import React,{FC} from 'react'

  

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

  

const Home : FC = ()=>{

    const nav=useNavigate();

  

    const toLogin = () => {

        //1.一般跳转

        // nav('/login')

        //2.携带参数跳转   http://localhost:5173/login?a=100

        nav({

            pathname:'/login',

            search:'a=100',

        })

    }

    return (

        <>

        <h1>home</h1>

        <div>

            {/* 1. 通过第三方hook跳转 */}

            <button onClick={toLogin}>登录</button>

            <br />

  

            {/* 2. 通过Link组件跳转 */}

            {/* 2.1 一般跳转 */}

            {/* <Link to="/register">注册</Link> */}

            {/* 2.2 携带参数跳转 */}

            <Link to="/register?a=100">注册</Link>

  

        </div>

        </>

    )

}

  
  

export default Home;
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

获取动态参数

http://localhost:5173/question/edit/20

import React,{FC} from 'react'

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

  

const Edit : FC = ()=>{

    //获取携带的参数

    const {id = ''} = useParams();

    return (

        <>

        <h1>edit  {id}</h1>

      
        </>

    )

}

  
  

export default Edit;
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

获取url参数

http://localhost:5173/manage/list?keyword=13

 // 获取url参数

    const [searchParams] = useSearchParams()

    console.log('keyword',searchParams.get("keyword"));
1
2
3
4
5