React路由 | 豆包MarsCode AI刷题

用户8328182493048
52 阅读5分钟

React路由介绍

现代的前端应用大多都是 SPA（单页应用程序）single page application，也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。

为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。

前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）

  • 前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系 。一个路由就是一对映射关系-->key：value
  • 使用React路由简单来说，就是配置 路径和组件（配对）

前后端路由介绍

  1. 后端路由： 1)理解： value是function, 用来处理客户端提交的请求。 2)注册路由： router.get(path, function(req, res)) 3)工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
  2. 前端路由： 1)浏览器端路由，value是component，用于展示页面内容。 2)注册路由: 3)工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

路由的本质: 一个路径 path 对应唯一的一个组件 component 当我们访问一个 path 自动把 path 对应的组件进行渲染。

React 路由的基本使用

1. 安装

首先你要有一个React项目：（这是 React 脚手架初始化项目）

npx create-react-app my-app

注：React 路由使用前需要*先安装 react-router-dom 的包*，React 脚手架初始化项目时不会自动安装这个包，需要我们手动再安装

安装包：yarn add react-router-dom 或 npm i react-router-dom@6

2.React路由demo

代码示例：

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
 
function Home () {
  return (
    <p>这是首页的内容</p>
  )
}
function About () {
  return (
    <p>这是关于的内容</p>
  )
}
function App () {
  return (
    // 声明当前要用一个非hash模式的路由
    <BrowserRouter>
      <div className="App">
        {/* 指定跳转的组件，to 用来配置路由地址 */}
        <Link to="/">首页</Link><br />
        <Link to="/about">关于</Link>
        {/* 路由出口：路由对应的组件会在这里进行渲染 */}
        <Routes>
          {/* 指定路由路径和组件的对应关系：path 代表路径，element 代表对应的组件，它们成对出现 */}
          <Route path='/' element={<Home />}></Route>
          <Route path='/about' element={<About />}></Route>
        </Routes>
      </div>
    </BrowserRouter>
  )
}
 
export default App

3.总结

两种常用的路由模式：BrowserRouter和HashRouter

核心组件功能
BrowserRouter声明当前要用一个非hash的模式的路由包裹整个应用。一个React应用只需使用一次。使用 H5 的 history.pushState API 实现（http://localhost:3000/first）（**推荐**）
HashRouterhash模式的路由。一个有#（HashRouter），一个不带#（BrowserRouter） 使用 URL 的哈希值实现（http://localhost:3000/#/first）
Link指定导航链接，完成路由跳转。to属性指定路由地址，最终被渲染为a标签
Routes提供一个路由出口，满足条件的路由组件，会渲染到组件内部
Route用于指定路由组件和路由地址。path：路由组件对应的路径；element：路由组件；成对出现

路由的执行过程

  1. 点击 Link 组件（a标签），修改了浏览器地址栏中的 url 。

  2. React 路由监听到地址栏 url 的变化。

  3. React 路由内部遍历所有 Route 组件，使用路由规则（ path ）与 pathname 进行匹配。

  4. 当路由规则（path）能够匹配地址栏中的 pathname 时，就展示该 Route 组件的内容。、

编程式导航

注：上面使用 跳转 的方式是：声明式导航

编程式导航: 通过 js 编程的方式进行路由页面跳转，比如说从首页跳转到关于页

实现步骤：

  1. 导入一个 useNavigate 钩子函数
  2. 执行 useNavigate 函数 得到 跳转函数
  3. 在事件中执行跳转函数完成路由跳转

示例代码

// 导入useNavigate函数
import { useNavigate } from 'react-router-dom'
const Home = () => {
  // 执行函数
  const navigate = useNavigate()
  return (
    <div>
      Home
      <button onClick={ ()=> navigate('/about') }> 跳转关于页 </button>
    </div>
  )
}
 
export default Home

注: 如果在跳转时不想添加历史记录，可以添加额外参数 replace 为 true

navigate('/about', { replace: true } )

路由传参(函数式组件的路由传参)

跳转路由的同时，很多时候都需要传递参数，这里有两种传参方式：

1. searchParams传参

路由传参

 navigate('/?id=1001&name=zs', { replace: true })

路由取参

import { useSearchParams } from 'react-router-dom'
// 在Home中读取页面传递过来的参数(以路径拼接的方式传递过来的参数)
function Home () {
  const [params] = useSearchParams()
  // params 是一个对象，对象里有一个get方法用来获取对应的参数
  // 把参数的名称作为get方法的实参传递即可
  const id = params.get('id')
  const name = params.get('name')
  return (
    <p>这是首页的内容,首页获取到的参数id:{id},name:{name}</p>
  )
}

2.params传参

路由传参

    navigate('/about/1002/lisi', { replace: true })

设置参数占位符

{/* 使用 params 传参和接收参数时，指定路由路径时需要提前使用“占位符”给参数进行占位 */}
<Route path='/about/:id/:name' element={<About />}></Route>

路由取参

import { useParams } from 'react-router-dom'
// 在关于页面接收登录页使用 params 传参的方式传递过来的参数
function About () {
  const params = useParams()
  return (
    <p>这是关于的内容,接收到登录页传递过来的id为：{params.id},name为{params.name}</p>
  )
}

404路由配置

场景：当 url 的路径在整个路由配置中都找不到对应的 path ，使用404兜底组件进行渲染。

实现步骤:

  1. 准备一个 NotFound 组件（404的页面）
  2. 把该组件的路由对应关系配置为 Routes 内部的一级路由，path='*'

示例代码

import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
// 定义 404 组件
const NotFound = () => {
  return (
    <h1>404  抱歉,页面未找到TAT</h1>
  )
}
function App () {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          {/* 一级路由 */}
          {/* 当所有路径都没有匹配到时渲染此组件 作为兜底 */}
          <Route path='*' element={<NotFound />}></Route>
        </Routes>
      </div>
    </BrowserRouter>
  )
}
 
export default App

Redirect (重定向)

1.一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由**
2.具体编码:<Routes>
         	<Route path="/home" component={Home}/>
            <Route path="/about" component={About}/>
            <Redirect to="/about"/>
          </Routes>


App.js代码修改

 {/* 注册路由 路由组件写法 */}
 <Routes>
 	<Route path="/home" component={Home}/>
 	<Route path="/about" component={About}/>
 	<Redirect to="/about"/>
 </Routes>
 
 记得引入
 import { Route,Routes,Redirect } from 'react-router-dom'
avatar
文章
阅读
粉丝