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)
  • 配置路由出口
ts 复制代码
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 />

    }

  

])
ts 复制代码
import { RouterProvider } from "react-router-dom"

import routerConfig from "./router"

  
  
  

function App() {

  

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

}

  

export default App

传递动态参数的写法

实现跳转

路由跳转

ts 复制代码
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

ts 复制代码
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

ts 复制代码
 // 获取url参数

    const [searchParams] = useSearchParams()

    console.log('keyword',searchParams.get("keyword"));
相关推荐
533_3 小时前
[element-ui] el-tree 组件鼠标双击事件
前端·javascript·vue.js
KIKIiiiiiiii3 小时前
微信个人号开发中如何高效实现API二次开发
java·前端·python·微信
日月之行_3 小时前
Vite+:企业级前端构建的新选择
前端
山顶听风4 小时前
Flask应用改用Waitress运行
前端·笔记·python·flask
Tom Ma.4 小时前
使用腾讯云云开发(CloudBase)的云函数,删除云存储中指定目录下的过期文件
前端·javascript·腾讯云
Hilaku4 小时前
技术、业务、管理:一个30岁前端的十字路口
前端·javascript·面试
Knight_AL4 小时前
大文件分片上传:简单案例(前端切割与后端合并)
前端·状态模式
雨过天晴而后无语4 小时前
HTML纯JS添加删除行示例一
前端·javascript·html
IT_陈寒4 小时前
Vue3性能翻倍秘籍:5个被低估的Composition API技巧让你开发效率飙升🚀
前端·人工智能·后端
袁煦丞4 小时前
N1+iStoreOS+cpolarN1盒子变身2048服务器:cpolar内网穿透实验室第653个成功挑战
前端·程序员·远程工作