React-Router路由跳转、传参、抽象封装以及嵌套路由

React-Router

示例

  • 这里我创建两个页面,分别是主页和登录页
  • 分别使用编程式导航和声明式导航进行页面跳转
  • 登录按钮:编程式导航
  • 主页标签:声明式导航

React-Router

  1. 导入createBrowserRouter和RouterProvider
  2. 创建Router实例对象并且配置路由对应关系
  3. 路由绑定
js 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter,RouterProvider } from 'react-router-dom';

//配置路由
const router = createBrowserRouter([
  {
    path:'/login',
    element:<div>我是登录页</div>
  },
  {
    path:'/index',
    element:<div>我是主页</div>
  }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  //路由绑定
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

抽象路由模块

  • 对页面和路由进行封装抽离

步骤:

  1. 准备一个page文件夹存放页面内容,并进行导出
js 复制代码
const Index = ()=>{
    return <div>我是主页</div>
}

export default Index

const Login = ()=>{
    return <div>我是登录页</div>
}

export default Login
  1. 准备一个router文件夹创建路由实例配置路由,并导出
js 复制代码
import { createBrowserRouter,RouterProvider } from "react-router-dom";
import Login from "../page/login";
import Index from "../page/index";

//配置路由
const router = createBrowserRouter([
    {
        path:'/login',
        element:<Login />
    },
    {
        path:'/index',
        element:<Index />
    }
])

export default router
  1. 在主文件中引入并绑定
js 复制代码
import { RouterProvider } from 'react-router-dom';
//导入路由
import router from './router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

路由导航

  • 路由系统中的多个路由之间需要进行路由跳转,并且在跳转的同时有可能需要传递参数进行通信

声明式导航

  • 通过在模版中通过<Link />组件描述出要跳转到哪里去,比如后台管理系统的左侧菜单
    <Link to="/index">主页</Link>

注意:浏览器在渲染时会将其解析为<a>标签

编程式导航

  • 通过useNavigate钩子得到导航方法,然后通过调用方法以命令式的形式进行路由跳转,例如登录完成后自动跳转到主页
js 复制代码
import { useNavigate } from "react-router-dom"
const Login = ()=>{
    const navigate = useNavigate()
    return <div>
        <p>我是登录页</p>
        <button onClick={()=>navigate('/index')}>登录</button>
        </div>
}

export default Login

路由导航传参

searchParams传参

  1. 在起始页面通过拼接字符串的方式传递参数
js 复制代码
import { useNavigate } from "react-router-dom"
const Login = ()=>{
    const navigate = useNavigate()
    return <div>
        <p>我是登录页</p>
        <button onClick={()=>navigate('/index?id=1&name=miraculous')}>searchParams传参</button>
        </div>
}

export default Login
  1. 在目标页面使用useSearchParams接收参数
js 复制代码
import { useSearchParams } from "react-router-dom"

const Index = ()=>{
    //在目标页面接收参数
    const [params] =  useSearchParams()
    console.log(params);
    const id = params.get('id')
    const name = params.get('name')
    return <div>我是主页 {id} {name}</div>
}

export default Index

params传参

  • 在目标页面使用useParams接收参数
  • 注意:params传参需要在router中加入占位符
    path:'/index/:id'
  • 示例:
js 复制代码
<button onClick={()=>navigate('/index/1')}>params传参</button>

//在目标页面接收参数
const params = useParams()
const id = params.id
return <div>我是主页 {id}</div>

嵌套路由配置

  • 在一级路由中又内嵌了其他路由,这种关系叫做嵌套路由
  • 实现步骤:
    • 使用children属性配置路由嵌套关系
    • 使用<Outlet />组件配置二级路由渲染位置

默认二级路由

  • 当访问的是一级路由时,默认的二级路由组件可以得到渲染,只需要在二级路由的位置去掉path ,设置index属性为true

404路由配置

  • 当浏览器输入url的路径在整个路由配置中都找不到对应的path,为了用户体验,可以使用404兜底组件渲染
  • 步骤:
    • 准备一个NotFound组件
    • 在路由表数组的末尾,以*号作为路由path配置路由

两种路由模式

  • 各种主流框架的路由常用的路由模式有两种,history模式和hash模式,ReactRouter分别由createBrowerRouter和createHashRouter函数负责创建

如何选择

  • 简单应用或需要快速开发:选择 Hash 模式,因为它无需服务器配置,开发起来更加简单。
  • 复杂应用或注重用户体验和 SEO:选择 History 模式,但需要确保服务器配置正确,以避免刷新页面时出现 404 错误。
相关推荐
蓝天白云下遛狗23 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿3 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再3 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref