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"));
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站