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

示例

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

React-Router

1. 导入createBrowserRouter和RouterProvider
2. 创建Router实例对象并且配置路由对应关系
3. 路由绑定

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文件夹存放页面内容，并进行导出

const Index = ()=>{
    return <div>我是主页</div>
}

export default Index

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

export default Login

2. 准备一个router文件夹创建路由实例配置路由，并导出

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

3. 在主文件中引入并绑定

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钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，例如登录完成后自动跳转到主页

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. 在起始页面通过拼接字符串的方式传递参数

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

2. 在目标页面使用useSearchParams接收参数

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'
• 示例：

<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 错误。