前端react入门day06-ReactRouter

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

目录

什么是前端路由

创建路由开发环境

快速开始

抽象路由模块

路由导航

什么是路由导航

声明式导航

编程式导航

导航传参

嵌套路由配置

什么是嵌套路由

嵌套路由配置

默认二级路由

404路由配置

俩种路由模式

什么是前端路由

一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染

创建路由开发环境

使用路由我们还是采用CRA创建项目的方式进行基础环境配置 1. 创建项目并安装所有依赖 npx create-react-app react-router-pro npm i 2. 安装最新的 ReactRouter包 npm i react-router-dom 3. 启动项目 npm run start

快速开始

需求：创建一个可以切换登录页和文章页的路由系统

抽象路由模块

实际开发中的router配置

article:

import { useParams, useSearchParams } from "react-router-dom"

const Article = () => {
  // const [params] = useSearchParams()
  // const id = params.get('id')
  // const name = params.get('name')

  const params = useParams()
  const id = params.id
  const name = params.name
  return <div>我是文章页{id}-{name}</div>
}

export default Article

login:

import { Link, useNavigate } from 'react-router-dom'
const Login = () => {
  const navigate = useNavigate()
  return (
    <div>
      我是登录页
     
    </div>
  )
}

export default Login

router:

import Login from '../page/Login'
import Article from '../page/Article'
import { createBrowserRouter, createHashRouter } from 'react-router-dom'
const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/article/:id/:name',
    element: <Article />
  }
])

export default router

index:

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import reportWebVitals from './reportWebVitals'
import { RouterProvider } from 'react-router-dom'

// 1. 导入路由router
import router from './router'

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

路由导航

什么是路由导航

声明式导航

声明式导航是指通过在模版中通过 `<Link/> ` 组件描述出要跳转到哪里 去，比如后台管理系统的左侧菜单通常使用这种方式进行

语法说明：通过给组件的 to属性指定要跳转到路由path ，组件会被渲染为浏览器支持的a链接，如果需要传参直接 通过字符串拼接 的方式拼接参数即可 

import { Link, useNavigate } from 'react-router-dom'
const Login = () => {
  const navigate = useNavigate()
  return (
    <div>
      我是登录页
      {/* 声明式的写法 */}
      <Link to="/article">跳转到文章页</Link>
   
    </div>
  )
}

export default Login

编程式导航

编程式导航是指通过 `useNavigate` 钩子得到导航方法，然后通过 调用方法以命令式的形式 进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活 语法说明：通过调用navigate方法传入地址path实现跳转

导航传参

嵌套路由配置

什么是嵌套路由

在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由，例如：

嵌套路由配置

实现步骤： 1. 使用 children 属性配置路由嵌套关系 2. 使用 `<Outlet/>` 组件配置二级路由渲染位置

默认二级路由

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

404路由配置

场景：当浏览器输入url的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染 实现步骤： 1. 准备一个NotFound组件 2. 在路由表数组的末尾，以*号作为路由path配置路由

俩种路由模式

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