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"));
相关推荐
qq_3901617711 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test41 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js