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 />

    }

  

])

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

import routerConfig from "./router"

  
  
  

function App() {

  

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

}

  

export default App

传递动态参数的写法

实现跳转

路由跳转

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;

获取动态参数

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;

获取url参数

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

 // 获取url参数

    const [searchParams] = useSearchParams()

    console.log('keyword',searchParams.get("keyword"));