《二》React Router 手动路由的跳转、路由参数的传递、路由的嵌套、路由懒加载、通过配置的方式使用路由

已于 2023-12-23 21:49:00 修改
阅读量3.8k 收藏 7
点赞数 4
分类专栏： React Router 文章标签： React Router
于 2023-02-07 12:00:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsln_123456/article/details/128911763
版权

手动路由的跳转：

上面的跳转，都必须通过点击 link 组件才能实现。

如果想通过 JS 手动跳转，分为两种情况：

  1. 在函数组件中：React Router 提供了一个 useNavigate Hook，调用 useNavigate() 会返回一个对象，返回的对象是一个函数，调用该函数，并且传入路径即可实现手动跳转。
    import React from 'react'
// 1. 从 react-router-dom 引入 useNavigate 这个 Hook
import {useNavigate} from 'react-router-dom'

function About() {
  // 2. 调用 useNavigate，会返回一个对象，返回的对象是一个函数
  const navigate = useNavigate()

  const handleNavToHome = () => {
    // 3. 调用返回的函数，实现手动跳转。第一个参数是要跳转的路径，第二个参数是非必填的配置项；或者参数也可以传入一个数字，表示前进或者后退
    navigate('/home')
  }

  return (
    <h1 onClick={handleNavToHome}>About</h1>
  )
}

export default About
  2. 在类组件中：React Router 没有提供在类组件中可以实现手动跳转的 API，可以用原生 JS （例如：window.location 等）来实现或者通过高阶组件来对类组件进行增强。

    React Router V5 中本身就是有 withRouter 这个高阶组件的。

    // hoc/WithRouter.jsx
import {useNavigate} from 'react-router-dom'

// 封装一个高阶组件来使类组件中可以获取到 navigate
function WithRouter(WrapperComponent) {
  // 返回一个新的函数组价
 function EnhanceComponent(props) {
  	// 在函数组件中调用 useNavigate Hook，将结果作为 props 传入
    const navigate = useNavigate()
    const router = {navigate}
    return <WrapperComponent {...props} router={router} />
  }
  return EnhanceComponent
}

export default WithRouter

    // Home.jsx
import React, {PureComponent} from 'react'

import WithRouter from './hoc/WithRouter'

class Home extends PureComponent {
  handleNavToAbout = () => {
    this.props.router.navigate('/about')
  }

  render() {
    return (
      <div>
        <h1 onClick={this.handleNavToAbout}>Home</h1>
      </div>
    )
  }
}

export default WithRouter(Home)

路由参数的传递：

  1. 通过动态路由的方式。

    动态路由指的是路由中的路径并不会固定。
    例如：/about 的路径对应一个组件 About。如果在配置 Route 时将 path 写成 /about/:userId，那么路径 /about/1，/about/2 都可以匹配到该 Route，About 组件将都可以显示。这个路由就称为动态路由。
    可以使用动态路由来为路由传递参数。

    // App.jsx
import React, {PureComponent} from 'react'
import {Routes, Route, Link} from 'react-router-dom'

import Home from './components/Home'
import About from './components/About'

class App extends PureComponent {
  render() {
    return (
      <div>
        <div>
          <Link to='/home'>首页</Link>
          {/* 1. 传递参数 */}
          <Link to='/about/123'>关于</Link>
        </div>

        <Routes>
          <Route path='/home' element={<Home/>} />
          {/* :userId 匹配动态路由 */}
          <Route path='/about/:userId' element={<About/>} />
        </Routes>
      </div>
    )
  }
}

export default App

    // About.jsx
import React from 'react'
import {useParams} from 'react-router-dom'

function About() {
  // 2. 获取参数。调用 useParams Hook 会返回一个对象，返回的对象中就包含动态路由中的参数
  const params = useParams()
  const userId = params.userId
  
  return (
    <h1>About：{userId}</h1>
  )
}

export default About
  2. 通过 search 传递参数。
    // App.jsx
import React, {PureComponent} from 'react'
import {Routes, Route, Link} from 'react-router-dom'

import Home from './components/Home'
import About from './components/About'

class App extends PureComponent {
  render() {
    return (
      <div>
        <div>
          <Link to='/home'>首页</Link>
          {/* 1. 传递参数。将 search 拼接在路径后面 */}
          <Link to='/about?userId=123'>关于</Link>
        </div>

        <Routes>
          <Route path='/home' element={<Home/>} />
          <Route path='/about' element={<About/>} />
        </Routes>
      </div>
    )
  }
}

export default App

    // About.jsx
import React from 'react'
import {useSearchParams, useLocation} from 'react-router-dom'

function About() {
  // 2. 获取参数。调用 useSearchParams Hook
  const [searchParams] = useSearchParams()
  const userId = searchParams.get('userId')

  // 也可以调用 useLocation Hook，就可以获取到 search，但是是一个字符串，还需要再进行转换
  // const location = useLocation() // 通过 location.search 就可以获取到 ?userId=123
 
  return (
    <h1>About：{userId}</h1>
  )
}

export default About

路由的嵌套：

路由是可以嵌套的。被嵌套的子路由，配置路径和组件的映射关系需要直接写在父路由下；使用 <Outlet /> 组件作为在父路由元素中子路由元素的占位元素，被嵌套的子路由的路径匹配上后，子路由的元素将会显示在 <Outlet /> 的位置。

React Router V5 中被嵌套的子路由，配置路径和组件的映射关系直接写在父路由的元素中。
React Router V6 中改为直接放置在父路由下，是为了统一、方便管理。

例如：有一个首页按钮和一个关于按钮，分别可以跳转到 Home 页和 About 页；然后在 Home 页又有一个首页推荐按钮和一个首页排行榜按钮，分别可以跳转到 HomeRecommend 页和 HomeRanking 页。这就是两级的路由嵌套。

// App.jsx
import React, {PureComponent} from 'react'
import {Routes, Route, Link} from 'react-router-dom'

import Home from './components/Home'
import About from './components/About'
import HomeRecommend from './components/HomeRecommend'
import HomeRanking from './components/HomeRanking'

class App extends PureComponent {
  render() {
    return (
      <div>
        <div>
          <Link to='/home'>首页</Link>
          <Link to='/about'>关于</Link>
        </div>

        <Routes>
          <Route path='/home' element={<Home/>}>
             {/* 1. 被嵌套的子路由，配置路径和组件的映射关系写在父路由下。统一写在此处，方便管理 */}
            <Route path='/home/recommend' element={<HomeRecommend />} />
            <Route path='/home/ranking' element={<HomeRanking />} />
          </Route>
          <Route path='/about' element={<About/>} />
        </Routes>
      </div>
    )
  }
}

export default App

import React, {PureComponent} from 'react'
import {Link, Outlet} from 'react-router-dom'

class Home extends PureComponent {
  render() {
    return (
      <div>
        <h1>Home</h1>
        <div>
          <Link to='/home/recommend'>首页推荐</Link>
          <Link to='/home/ranking'>首页排行榜</Link>
        </div>

        {/* 2. 子路由元素的占位元素。被嵌套的子路由的路径匹配上后，子路由的元素将会显示在此处 */}
        <Outlet />

        {/* React Router V5 中被嵌套的子路由，配置路径和组件的映射关系直接写在父路由的元素中 */}
        {/* <div>
          <Route path='/home/recommend' component={<HomeRecommend />} />
          <Route path='/home/ranking' component={<HomeRanking />} />
        </div> */}
      </div>
    )
  }
}

export default Home

请添加图片描述

路由懒加载：

import {Link, Routes, Route} from 'react-router-dom'

// 路由同步加载，打包的时候所有文件将都会被打包到一个 JS 中
import Home from './components/Home'
import About from './components/About'
import NotFound from './components/NotFound'

function App() {
  return (
    <div>
      <div>
        <Link to='/home'>首页</Link>
        <Link to='/about?userId=123'>关于</Link>
      </div>

      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </div>
  )
}

export default App

请添加图片描述

路由懒加载之后，打包的时候就可以进行分包处理，对其对应的文件进行单独打包，打包到一个单独的 JS 文件中。

React Router 的路由懒加载不是 React Router 提供的功能，而是借助 React 提供的 React.lazy() 来实现。 React.lazy() 需要传入一个函数作为参数，在函数内部可以使用 import() 来异步加载文件。

import() 可以在需要的时候，再加载某个模块；并且 Webpack 检测到 import() ，就会对其进行引入的文件进行单独打包。

// index.js
import {Suspense} from 'react'
import ReactDOM from 'react-dom/client'
import {HashRouter} from 'react-router-dom'

import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <HashRouter>
    {/* 1. 由于路由懒加载，可能会出现某些组件需要加载的时候还没有下载下来的情况，导致报错。因此使用 Suspense 组件包裹根组件，并且传入 fallback。在异步的组件还没下载完成、加载出来的时候，就会先显示 fallback 中传入的内容 */}
    <Suspense fallback={<h1>Loading</h1>}>
      <App />
    </Suspense>
  </HashRouter>
)

// App.jsx
import React from 'react'
import {Link, Routes, Route} from 'react-router-dom'

import Home from './components/Home'

// 2. 使用 React.lazy() 实现路由懒加载，在需要的时候才加载组件
const About = React.lazy(() => import('./components/About'))
const NotFound = React.lazy(() => import('./components/NotFound'))

function App() {
  return (
    <div>
      <div>
        <Link to='/home'>首页</Link>
        <Link to='/about?userId=123'>关于</Link>
      </div>
      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </div>
  )
}

export default App

请添加图片描述

通过配置的方式使用路由：

React Router V5 中想要通过配置的方式使用路由，需要单独安装一个 react-router-config 库。

// config.routers.js
import Home from '../components/Home'
import About from '../components/About'
import HomeRecommend from '../components/HomeRecommend'

// 1. 配置路由
const routers = [
  // 一级路由
  {
    path: '/home',
    element: <Home />,
    // 通过 children 配置嵌套的二级路由
    children: [
      {
        path: '/home/recommend',
        element: <HomeRecommend />,
      }
    ]
  },
  {
    path: '/about',
    element: <About />,
  },
]

export default routers

// App.jsx
import {Link, useRoutes} from 'react-router-dom'

import routers from './config/routers'

function App() {
  return (
    <div>
      <div>
        <Link to='/home'>首页</Link>
        <Link to='/about?userId=123'>关于</Link>
      </div>

      {/* 2. 调用 useRoutes Hook，传入路由的配置信息，渲染出来的其实下面下面注释掉的内容 */}
      {useRoutes(routers)}

      {/* <Routes>
        <Route path='/home' element={<Home />}>
          <Route path='/home/recommend' element={<HomeRecommend />} />
        </Route>
        <Route path='/about' element={<About />} />
      </Routes> */}
    </div>
  )
}

export default App
花铛
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超超详细ReactRouter v6版本的基本使用
qq_45679015的博客
03-27 4293
先附上官网的地址：react-router-v6 · GitHub Topics · GitHub 一.概述 React Router 以三个不同的包发布到 npm 上，它们分别为： react-router: 路由的核心库，提供了很多的：组件、钩子。 react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如<BrowserRouter>等。 react-router-native: ..
React路由篇:路由跳转以及带参的三种方式(react-router-dom声明式路由)
YanHSama的博客
10-12 4119
当查询信息,总有需要带上参数才能精准查询到自己想要的信息. 举个例子: 我要查询类别为笔记的的备忘录信息时,查询时需要带上t_event_noteClassify=“笔记”;
react-router-dom
sun~的博客
06-23 829
react-router-dom
ReactRouter——路由配置、路由跳转、带参跳转、新route配置项
最新发布
DogEgg_001的博客
06-05 2675
终于学到router了！今天主要是根据文档学的6.4相关的router，和现在常用的应该还是有点出入，肯定多看看就完事儿了！
React使用路由react-router-dom如何跳转和传参以及获取路由地址
weixin_50236973的博客
06-20 335
【代码】React使用路由react-router-dom如何跳转和传参。
react 实现页面跳转
每天都想吃好吃的
08-01 1566
在React中，你可以使用react-router-dom库来实现页面的跳转。该库提供了一些组件和函数，用于管理路由和导航。
react-router JS 控制路由跳转实例
10-19
本实例将深入讲解如何使用`react-router` JS来控制路由跳转。 首先，安装React Router库。如果你的项目还没有集成，可以通过npm或yarn添加： ```bash npm install react-router-dom # 或 yarn add react-router-...
详解前端路由实现与react-router使用姿势
08-29
3. 路由的参数传递：React Router支持路由参数的传递，例如： ``` <Router history={hashHistory}> </Router> ``` 在上面的代码中，我们配置了一个路由规则，其中repos路由接受一个repoId参数。 三、React ...
详解react如何在组件中获取路由参数
08-30
在React应用中，路由管理是...同时，React Router还提供了许多其他功能，如嵌套路由、导航守卫等，可以帮助我们构建更复杂的单页应用。不断学习和掌握React Router的使用，将有助于提升React应用的开发效率和用户体验。
ReactRouter是React的一个完整路由库
08-09
React Router 还支持动态路由、嵌套路由、路由参数以及路由守卫等高级特性： - **动态路由**: 动态路由允许我们在`Route`的`path`中使用冒号`:`来定义可变的部分，例如`/users/:userId`。这样，我们可以在组件中...
19 React react-router4.x路由的嵌套
03-01
总结来说，`react-router4.x`的路由嵌套是构建React应用的重要技术，它允许我们按照应用的层级结构来组织路由，同时提供了丰富的API和组件，以实现灵活的页面跳转和组件渲染。理解并熟练掌握路由嵌套对于开发复杂的...
React 入门学习（十二）-- React 路由跳转
小丞同学
09-27 4262
这篇文章是学习 React 中 React 路由跳转的学习笔记 1. push 与 replace 模式 默认情况下，开启的是 push 模式，也就是说，每次点击跳转，都会向栈中压入一个新的地址，在点击返回时，可以返回到上一个打开的地址， 就像上图一样，我们每次返回都会返回到上一次点击的地址中 当我们在读消息的时候，有时候我们可能会不喜欢这种繁琐的跳
【前端知识】React 基础巩固(四十)——Navigate导航
Outman's blog
07-30 2457
新建Login页面，在Login中引入Navigate，实现点击登陆按钮跳转至/home当路由均无匹配时，通过Navigate跳转至NotFound界面，其中为通配符：构建NotFound.jsx。
angularjs 让当前路由重新加载_根据AngularJS重新加载当前路由页面，有哪些方法？...
weixin_39915668的博客
12-20 158
下面我就为大家分享一篇AngularJS中重新加载当前路由页面的方法，具有很好的参考价值，希望对大家有所帮助。这个问题同样困扰我很久，网上的回答五花八门，全都不能解决；终于在网上找很久，看到某大神的解决办法，整理作此分享；使用ui-router重新加载当前页面的问题。(ui-router版本需要是0.2.14以上的)用angular做项目，会碰到需要点击菜单刷新当前页面，加载当前页面，但是同一个路...
React-Router6版本的更新引起的路由用法变化
sdasadasds的博客
01-18 2517
React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有45.2k的加星，足以说明它是一款非常优秀的库，作为React社区重要的库，它经历了多次迭代和重大更改，就在上个月，更是迎来了一个大的正式版更新6.x，当前最新为6.0.2，相对比于之前的5.x版本做出了较大改变，不管从用法还是从性能上都有了明显的提升，本文也将用新老版本对比的方式让你能以最快的速度上手新用法 话不多说，先列出6.0做出的改变之处： 用法变化 替换为 嵌套路由新写法 推出全新hoo
【React 全家桶】React路由的使用 —— react-router-dom（路由切换、获取路由参数、路由嵌套、404）内含源码
Dai的博客
01-28 3965
【React 全家桶】React路由的使用 —— react-router-dom 路由切换、获取路由参数、路由嵌套、404
React学习（三）——Router路由的使用和页面跳转
热门推荐
daxiazouyizou的博客
03-30 2万+
    大家好，我是凯文，本篇文章内容是关于React框架中的路由“Router”和跳转功能进行讲解。    React-Router的中文文档可以参照如下链接：        http://react-guide.github.io/react-router-cn/docs/Introduction.html    文档中介绍的很详细，下面将通过个人视角介绍Router的用法，并通过实例来呈现，...
react router4 js控制跳转
事在人为2018的博客
02-12 8987
react 16.2.0;react-router 4.2.0;react-router-dom 4.2.2本示例演示从开始时显示Test1组件，过两秒后跳转到Test2，再过两秒跳回Test1。很简单，直接看代码关键点：相对react-router之前版本，react-router4通过withRouter获取historyimport React from 'react';import Rea...
react-navigation路由篇之StackRouter
weixin_33795093的博客
07-13 385
react-navigation的基础认识： react-navigation是官方正在推的导航，但是没有放入到react-native包中，而是单独开了一个库，它的核心概念是Router，Router的概念图如下所示：routers-concept-map.png 最上方的文字：上面这个图清晰的表达出了Router能干什么，最重要的一句话是：Router经常组合使用，并且能代理子路由，这句话的意...
useNavigate需要传递哪些参数
04-24
useNavigate函数是React Router中的一个Hooks函数，它用于在JavaScript代码中导航到React Router中的不同路由。要使用useNavigate，在React组件中引入，然后在组件内使用。 useNavigate需要传递一个`to`参数，表示要跳转到的路由的路径。此外还可以传递一个可选的`replace`参数，表示替换当前历史纪录而不是添加一个新的纪录。 例如，以下示例代码展示了如何使用useNavigate从当前路径跳转到`/home`路径。 ``` import { useNavigate } from 'react-router-dom'; function MyComponent() { const navigate = useNavigate(); function handleButtonClick() { navigate('/home'); } return ( <button onClick={handleButtonClick}>Go to Home</button> ); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值