快速上手使用react-router-dom 6

已于 2022-06-01 10:31:47 修改
阅读量760 收藏 6
点赞数 1
分类专栏： react react-router-dom 文章标签： react.js
于 2022-05-20 10:15:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43689603/article/details/124864607
版权

快速上手使用react-router-dom 6

官方文档地址：https://reactrouter.com/docs/en/v6/getting-started/overview

1. 与旧版本的主要变化

变化1：Switch标签替换成Routes
变化2：原本渲染组件的方式由
	  <Route path="/" component={Home}>
      变为
      <Route path="/" element={<Home/>}
     （其中Home是对应的组件）
变化3：useHistory替换成useNavigate
变化4：Redirect替换成Navigate
变化5：新增useRoutes来替代版本5需要安装react-router-config插件才能实现的功能

2. 具体运用，分两步来演示，第一部分是未抽离，第二部分是抽离后

第一部分

import React, { PureComponent } from 'react'
import Home from "@/components/Home.js"
import About from "@/components/About.js"
import About2 from "@/components/About2.js"
import About3 from "@/components/About3.js"
import NoMatch from "@/components/NoMatch.js"
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"

export default class index extends PureComponent {
  render() {
    return (
      <BrowserRouter>
        <Link to='/home'>Home</Link>
        {/* 动态路由 */}
        <Link to='/about/123456'>About</Link> 
        {/* 传参 */}
        <Link to='/about2' state={{age: '16', name:"sky"}}>About2</Link>
        <Link to='/about3/123?name=sky&age=16' state={{age: '16', name:"sky"}}>About3</Link>

        <Routes>
          <Route path='/home' element={ <Home/> }/>
          <Route path='/about/:userId' element={ <About/> }/>
          <Route path='/about2' element={ <About2/> }/>
          <Route path='/about3/:id' element={ <About3/> }/>
          <Route path='*' element={ <NoMatch/> }/>
        </Routes>
      </BrowserRouter>
    )
  }
}
注意点：
1、他们都需要包裹在BrowserRouter或者HashRouter里面
2、Route需要包裹在Routes里面,跟以前的Switch一样
3、Route里面渲染组件方式是element = {<组件名/>}
2.1关于传参:
// About.js文件
import React from 'react'
import { useSearchParams, useParams, useLocation } from "react-router-dom"

export default function About() {
  const params = useParams()
  const location = useLocation()
  let [searchparams, setsearchparams] = useSearchParams()
  console.log('params', params);
  console.log('location', location);
  console.log('searchParams', searchparams.get('name'));
  console.log('searchParams', searchparams.get('age'));
  return (
    <div>我是About3</div>
  )
}
过程解析:

当点击About3的链接时，我们看一下控制台打印的数据就一目了然了
在这里插入图片描述
在这里插入图片描述

<Link to='/about3/123?name=sky&age=16' state={{age: '16', name:"sky"}}>About3</Link>

可以看出，使用useParams可以获取我们传入的params（本例：/123），useLocation可以获取我们传入的state（本例：state={{age: ‘16’, name:“sky”}}）的数据，useSearchParams可以获取我们传入的相关query(本例：?name=sky&age=16）数据

2.2 镶套路由
 <Link to='/home'>Home</Link>

通过点击进入
我们来看看Home.js文件的内容

import React from 'react'
import { Routes, Route, Link, useNavigate } from "react-router-dom"
import Child1 from "@/components/Child1"
import Child2 from "@/components/Child2"

export default function Home() {
  const navigate = useNavigate()

  function ToAbout3() {
    navigate('/about3/123456?name=sky&age=16')
  }
  return (
    <div>
      <h2>我是Home</h2>
      <Link to="child1">child1</Link>
      <Link to="child2">child2</Link>
      <button onClick={ e => ToAbout3()}>toAbout3</button>
      <Routes>
        <Route>
          <Route path='child1' element={<Child1/>}/>
          <Route path='child2' element={<Child2/>}/>
        </Route>
      </Routes>
    </div>
  )
}

在这里插入图片描述

可以看到，我们从/home跳转过来后，在这个Home组件里面进行的路由跳转不需要再加上/home/child1这样的路径，只需要to=“child1”既可进行跳转,Route匹配的路径也只需要path=“child1”即可

注意点：那么如果我们将原来的

<Link to="child1">child1</Link>
改为
<Link to="child1/test">child1</Link>

<Route path='child1' element={<Child1/>}/>
改为
<Route path='child1/test' element={<Child1/>}/>

我们点击看看一下结果
在这里插入图片描述
欸，你会惊讶的发现，我Child1组件呢？然后下面还伴随一个警告提示，大致翻一下的意思就是：你渲染了后代(或称为’ useRoutes() ')在"/home"(在下)，但是父路由路径没有尾随"*"。 这意味着如果你深入导航，父路由将不再匹配，因此子路由将永远不会呈现。请将父节点改为。

简而言之就是如果你需要深入导航，你父组件匹配的路由需要由
<Route path='/home' element={ <Home/> }/>
改为
<Route path='/home/*' element={ <Home/> }/>

然后再看一下页面，呼~，终于又可以了
在这里插入图片描述

我们还可以将
<Route path='child1/test' element={<Child1/>}/>
替换成
<Route path="child1">
  <Route path='test' element={<Child1/>}/>
</Route>
他们是等价的
其他路由匹配

在这里插入图片描述
以上就是没有抽取前的相关路由运用，接一下我们看看抽离后的代码是怎么样的吧！

第二部分

第一步：我们将相关路由抽离到一个独立的js文件中，跟以前的react-router-config或者vue里面的路由配置很像


import Home from "@/components/Home.js"
import Child1 from "@/components/Child1"
import Child2 from "@/components/Child2"
import About from "@/components/About.js"
import About2 from "@/components/About2.js"
import About3 from "@/components/About3.js"
import NoMatch from "@/components/NoMatch.js"

export const routes = [
  {
    path: "/home",
    element: <Home/>,
    children: [
      {
        path: "child1/test",
        element: <Child1/>
      },
      {
        path: "child2",
        element: <Child2/>
      }
    ]
  },
  {
    path: "/about/:userId",
    element: <About/>
  },
  {
    path: "/about2",
    element: <About2/>
  },
  {
    path: "/about3/:id",
    element: <About3/>
  },
  {
    path: "*",
    element: <NoMatch/>
  }
]

import React, { PureComponent } from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"
import { useRoutes } from "react-router-dom"
import { routes } from "@/router" // 这个是上面抽离出来的js文件

function RouteElement() {
  const element = useRoutes(routes) 
  return element
}

export default function Index() {
  return (
    <BrowserRouter>
      <Link to='/home'>Home</Link>
      {/* 动态路由 */}
      <Link to='/about/123456'>About</Link> 
      {/* 传参 */}
      <Link to='/about2' state={{age: '16', name:"sky"}}>About2</Link>
      <Link to='/about3/123?name=sky&age=16' state={{age: '16', name:"sky"}}>About3</Link>

      
      {/* 没抽离前 */}
      {/* 
        <Routes>
          <Route path='/home/*' element={ <Home/> }/>
          <Route path='/about/:userId' element={ <About/> }/>
          <Route path='/about2' element={ <About2/> }/>
          <Route path='/about3/:id' element={ <About3/> }/>
          <Route path='*' element={ <NoMatch/> }/>
        </Routes>  
      */}
     

      {/* 抽离后 */}
      {<RouteElement/>}
    </BrowserRouter>
  )
}

注意点：把抽离的js文件导入进来，用一个组件把react-router-dom自带的useRoutes包裹后渲染出来放在BrowserRouter或HashRouter即可

function RouteElement() { 
	const element = useRoutes(routes)
	return element
}

第二步：子路由只需要加个react-router-dom自带的Outlet组件即可

import React from 'react'
import { Routes, Route, Link, useNavigate, Navigate, Outlet } from "react-router-dom"

export default function Home() {
  const navigate = useNavigate()

  function ToAbout3() {
    navigate('/about3/123456?name=sky&age=16')
  }
  return (
    <div>
      <h2>我是Home</h2>
      <Link to="child1/test">child1</Link>
      <Link to="child2">child2</Link>
      <button onClick={ e => ToAbout3()}>toAbout3</button>

      
      {/* 没抽离前 */}
      {/* 
        <Routes>
          <Route path="child1">
            <Route path='test' element={<Child1/>}/>
          </Route>
          <Route path='child2' element={<Child2/>}/>
        </Routes> 
      */}

      {/* 抽离后 */}
      <Outlet />
    </div>
  )
}

我们抽离的文件的如下部分
![在这里插入图片描述](https://img-blog.csdnimg.cn/1357e084fc784c779b17175e5474b6d3.png

以上就是react-router-dom6快速上手的相关内容了，希望能帮助到你

以上，完毕！

ilove~
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
模块““react-router-dom“”没有导出的成员“useHistory”
Youxingfang的博客
07-04 2362
useNavigate 是一个 React Router v6 中的新 Hook，用于在 React 组件中进行路由的导航。这个函数可以接受一个字符串参数，表示要导航到的路径，还可以接受一个可选的对象参数，表示导航的其他选项，例如替换当前路由、在历史记录中前进或后退等。注：useNavigate 只能在 React Router v6 中使用，如果你的项目中使用的是 React Router v5 或更早的版本，你需要继续使用 useHistory。
简介react-router-dom基本使用
AI_huihui的博客
04-26 1460
React Router附带了一些HOOK，可让您访问路由器的状态并从组件内部执行导航，例如 useHistory useLocation useParams useRouteMatch
2024年前端最新react-router-dom V6 中文文档教程总结_reactrouter6中文文档(2)，2024前端大厂高频面试题
2401_84616922的博客
05-13 1043
获取路由参数 ，在以往的react-router-dom版本中，路由的三个参数location、history、match都是直接挂载到组件的props身上，即使组件不是路由组件，也可以使用withRouter高阶组件对普通组件进行增强，也可以将这三个参数带到props身上。编程式路由导航，在非受控组件中可以使用useNavigate这个钩子进行导航，而在类组件中无能为力，只能想办法使用这个标签，非常的麻烦，可以看看这篇文章：https://www.jianshu.com/p/5bdfd2fac2cd。
React 路由使用的基本
weixin_58207509的博客
11-17 574
React Router 如何使用history跳转
热门推荐
qq_34153210的博客
05-20 1万+
react 路由
react报：export useHistory (imported as useHistory) was not found in react-router-dom
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
08-31 7023
react-router-dom v4 可以使 withRouter (函数组件里可以用这个方法),当然 也可以直接 this.props.history.push。很明显 这个报错 是说 react-router-dom 里没有 useHistory。这个就涉及 react-router-dom这个插件的版本问题了。react-router-dom v5 是使用 useHistory。问题出在这里了 不同版本差异化，所以用之前需要确认版本。react-router-dom v6 里。..........
react-router-starter-kit:React Router v4示例代码
05-16
这是一个很好的起点，可以帮助初学者快速上手React应用的路由管理。 总结来说，React Router v4是React应用中不可或缺的一部分，它使我们可以根据URL的变化动态地切换组件，构建出丰富的单页应用。通过这个示例项目...
基于react+redux+react-router+webpack+es6+axios的仿QQ音乐客户端项目（毕设&课设）
最新发布
05-28
Vue只需要引用一个Vue.js即可使用，而React则要引用React.js、React-dom.js、babel.js(用于转换jsx的语法)。 Vue在上手程度上要优于React。Vue学习成本很低，另外官方有比较完善的中文文档。而React官方则只有英文...
react-cnode:由react＆react-router＆webpack编写的cnode网站
04-12
基于react&react-router-dom，利用CNode API重写CNode社区。 线上实例Demo 文档 暂无 快速上手 项目克隆git clone或者直接Download git clone https://github.com/ChenJiaH/react-cnode.git 安装依赖 npm install ...
react-redux:一个可以帮助你快速上手 react + redux 的示例项目
05-10
综上所述，这个示例项目涵盖了前端开发的多个关键领域：React 用于构建视图，Redux 管理全局状态，React Router 实现页面路由，ES6 提升代码质量，Axios 处理HTTP请求，Less 优化CSS编写，Ant Design 提供UI组件，...
react-使用ReactVue和Singlespa构建微前端MicroFrontends
08-15
- 使用single-spa的`single-spa-hash-router`或`single-spa-browser-router`库来处理子应用之间的路由通信。 6. **部署和运行** - 每个子应用可以独立打包部署，主应用只需引用这些部署后的子应用。 - 运行主...
react router v6实现useHistory与自定义history设计思路
幻日のヨハネ
09-20 1万+
众所周知，/在 v6 版本取消了对的依赖，大幅减负，内部自己实现了更简约、轻量的history，所以不再提供useHistory方法，这会导致：如果从 react router v5 升级，迁移困难。无法使用，新的、学习成本等。为了解决这个问题，本文介绍 三种不同场景 下重新实现useHistory的思路。注：以下我们均指代的是 react router >= 6 的版本。从某种程度上来说，使用UNSAFE_*的 router 内部 context 确实可以解决我们的问题，但也带来了一定的不确定性。
React-Router --------- react-router-dom v6新特性使用
qq_48718857的博客
01-26 951
1.安装依赖 npm i react-router-dom 2.引入实现路由所需的组件，以及页面组件 import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Foo from './Foo'; import Bar from './Bar'; ​ function App(){ return ( <BrowserRouter> <Routes>
react-router-dom v6的变化
catchmypow的博客
05-12 1367
react-router-dom v6 1、useNavigate替代useHistory 在v6版本useHistory被新hookuseNavigate代替，用法也发生的很大的变化 //v5 import {useHistory} from 'react-router-dom' function ChangePage(){ const history = useHistory() const handleClick = () => { history.push('
react-router-dom6，react路由6和5的区别，一文搞懂react-router-dom6
jiang7701037的博客
07-02 1615
router-router-dom6 就是当前react路由的最新版本 在2021年11月发布 已经是路由推荐版本。
React Router 5.1.0使用useHistory做页面跳转导航
zm_miner的博客
09-01 1万+
React Router v4页面跳转 在React Router v4中 可以使用 withRouter组件 使用标签 1.使用withRouter组件 withRouter组件将注入history对象作为该组件的属性 import React from 'react' import { withRouter } from 'react-router-dom' import { Button } from 'antd' export const ButtonWithRouter = withRout
react-router-dom v6 useRoutes应用(懒加载多级路由)
qq_18470967的博客
11-30 9513
文章目录前言代码引入方式最终效果 前言 本篇文章编辑环境： 对应的版本 react版本：18.0.0 react-dom版本：18.0.0 react-router-dom版本：6.3.0 由于上一篇写的不是特别好，我就直接重置了这一篇。 我就先附上代码了，这次写的比较简洁易懂。 整个路由的使用逻辑，其实和vue-router类似，本篇主要是懒加载。 这个v6版本的路由依赖 有这俩东西值得关注 import { useRoutes, Outlet } from 'react-router-dom'
React-Router 基础知识
qq_37030315的博客
04-25 810
所以Router、Route和History是React Router的三个核心部分,理解它们的作用和关系,就能掌握React Router的基本原理。那么浏览历史为:/home -> /posts -> /posts/1 ,可以回退到/posts页面。在React Router中,可以通过useParams hook获取URL中的参数。在React Router中,可以通过useHistory hook获取历史对象。那么浏览历史为:/home -> /posts/1 ,无法回退到/posts页面。
react-router-domV6版本在js文件使用history跳转
qq_23207707的博客
07-11 2868
非React的上下文环境或全局变量中使用Router
react框架快速上手
03-04
6. 学习如何使用 React Router 实现页面路由和导航。 7. 学习如何使用 Redux 或其他状态管理库来管理应用程序的状态。 8. 掌握 React 生态系统中常用的工具和库，如 Webpack、Babel、ESLint 等。 需要注意的是，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值