React-RouterV6版本的使用

最新推荐文章于 2023-01-31 23:37:53 发布
最新推荐文章于 2023-01-31 23:37:53 发布
阅读量1.3k 收藏
点赞数
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/idiot_man/article/details/127814275
版权

文章目录

React-RouterV6

https://reactrouter.com/en/main/components/routes

简介

  • react-router :核心模块‘ react路由的大部分的核心功能，包括路由匹配算法和大部分的核心组件和钩子

  • react-router-dom React组件中用于路由的软件包，包括react-router的所有内容，还添加了一些特定的Dom的api

  • react-router-native 开发reactNavite应用，包括react-router的所有内容，添加了一些react-native的api

react-routerV6版本和V5版本的区别
  • 包大小的不同 V5 大小在20.8k左右，压缩后在7.3k左右；V6 大小在10.8k左右，压缩后在3.8k左右
  • Route 特性变更
    • path 当前页面对应的URL地址
    • element 路由匹配时，渲染哪个组件 ；替代了V5里的component和render
  • Routes替代了Switch
  • 嵌套路由更简单
  • useNavigate替代了useHistory
  • 移除了activeClassName
  • 钩子useRoutes替代了react-router-config
路由使用

  • 路由表配置

    src/router/index.js

    import React from 'react'

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

import Home from '../Home'
import Course from '../Course'

export default function MRoute() {
  return (
    // Routes替代了Switch
    <Routes>
      {/* element替代了component */}
      <Route path="/home" element={<Home />}></Route>
      <Route path="/course" element={<Course />}></Route>
    </Routes>
  )
}

  • 路由视图

    App.js

    import React from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
// 引入路由表
import MRoute from './router'

export default function App() {
  return (
    <Router>
      <MRoute />
    </Router>
  )
}
路由重定向

React-routerV6版本中已经没有了Redirect组件

  • 第一种：使用Navigate组件替代

    src/router/index.js

    import React from 'react'

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

import Home from '../Home'
import Course from '../Course'

export default function MRoute() {
  return (
    // Routes替代了Switch
    <Routes>
      {/* element替代了component */}
      <Route path="/home" element={<Home />}></Route>
      <Route path="/course" element={<Course />}></Route>
      {/* 路由重定向 */}
      <Route path="/" element={<Navigate to="/home" />}></Route>
    </Routes>
  )
}

  • 第二种：自定义Redirect组件

    import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

export default function Redirect(props) {
  const navigate = useNavigate()
  useEffect(() => {
    // replace: true 代表的是要替换掉之前的页面
    navigate(props.to, { replace: true })
  })
  return null
}


    <Routes>
      {/* element替代了component */}
      <Route path="/home" element={<Home />}></Route>
      <Route path="/course" element={<Course />}></Route>
      {/* 路由重定向 */}
      <Route path="/" element={<Redirect to="/home" />}></Route>
    </Routes>

  • 404页面

    <Routes>
      {/* element替代了component */}
      <Route path="/home" element={<Home />}></Route>
      <Route path="/course" element={<Course />}></Route>
      {/* 路由重定向 */}
      <Route path="/" element={<Redirect to="/home" />}></Route>
      {/* 404页面 */}
      <Route path="*" element={<NotFound />}></Route>
</Routes>
声明式导航和编程式导航

  • 声明式导航

    <Router>
      <NavLink to="/home">首页</NavLink>
      <NavLink to="/course">课程</NavLink>
      <hr />
      <MRoute />
    </Router>

NavLink组件会自动给当前的匹配到的路由NavLink添加一个class名为active，要实现高亮效果设置active样式

​ 自定义class名

<Router>
      <NavLink
        to="/home"
        className={({ isActive }) => (isActive ? 'my-active' : '')}
      >
        首页
      </NavLink>
      <NavLink
        to="/course"
        className={({ isActive }) => (isActive ? 'my-active' : '')}
      >
        课程
      </NavLink>
      <hr />
     <MRoute />
 </Router>

NavLink有一个属性className，它接收一个函数，该函数的参数是一个对象，里面有一个属性isActive，

我们可以根据这个属性的值是否为true来判断是否添加class名

  • 编程式导航

    import React from 'react'
import { useNavigate } from 'react-router-dom'

export default function Home() {
  // 使用useNavigate这个钩子 可以通过js的方式实现跳转
  const navigate = useNavigate()
  return (
    <div>
      <div>Home</div>
      <button onClick={() => navigate('/course')}>去课程</button>
    </div>
  )
}
嵌套路由

  • 基本配置

    import React from 'react'

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

import Home from '../Home'
import Course from '../Course'

import Redirect from '../Redirect'
import NotFound from '../NotFound'

import JsCourse from '../JsCourse'
import VueCourse from '../VueCourse'
import ReactCourse from '../ReactCourse'

export default function MRoute() {
  return (
    // Routes替代了Switch
    <Routes>
      {/* element替代了component */}
      <Route path="/home" element={<Home />}></Route>
      <Route path="/course" element={<Course />}>
        {/* 嵌套路由 */}
        {/* index匹配到的父路径 */}
        <Route index element={<Redirect to="/course/js" />}></Route>
        <Route path="js" element={<JsCourse />}></Route>
        <Route path="vue" element={<VueCourse />}></Route>
        <Route path="react" element={<ReactCourse />}></Route>
      </Route>
      {/* 路由重定向 */}
      <Route path="/" element={<Redirect to="/home" />}></Route>
      {/* 404页面 */}
      <Route path="*" element={<NotFound />}></Route>
    </Routes>
  )
}

  • 通过Outlet组件实现嵌套路由的视图显示

    import React from 'react'

import { NavLink, Outlet } from 'react-router-dom'

export default function Course() {
  return (
    <div>
      <NavLink to="/course/js">js课程</NavLink>
      <NavLink to="/course/vue">vue课程</NavLink>
      <NavLink to="/course/react">react课程</NavLink>
      <hr />
      <Outlet />
    </div>
  )
}
动态路由

  • query形式传参

    export default function Home() {
// 使用useNavigate这个钩子 可以通过js的方式实现跳转
const navigate = useNavigate()
return (

  <div>
    <div>Home</div>
    <button onClick={() => navigate('/course')}>去课程</button>
    {/* 新闻 */}
    <NavLink to="/news?id=1">军事新闻</NavLink>
    <NavLink to="/news?id=2">体育e新闻</NavLink>
    <NavLink to="/news?id=3">娱乐新闻</NavLink>
  </div>

  )
}

//路由配置
<Routes>
      {/* element替代了component */}
      <Route path="/home" element={<Home />}></Route>
      <Route path="/course" element={<Course />}>
        {/* 嵌套路由 */}
        {/* index匹配到的父路径 */}
        <Route index element={<Redirect to="/course/js" />}></Route>
        <Route path="js" element={<JsCourse />}></Route>
        <Route path="vue" element={<VueCourse />}></Route>
        <Route path="react" element={<ReactCourse />}></Route>
      </Route>
      {/* 新闻 */}
      <Route path="/news" element={<News />}></Route>
      {/* 路由重定向 */}
      <Route path="/" element={<Redirect to="/home" />}></Route>
      {/* 404页面 */}
      <Route path="*" element={<NotFound />}></Route>
    </Routes>

//News.js  获取参数
import React from 'react'
import { useSearchParams } from 'react-router-dom'

export default function News() {
  // 通过useSearchParams钩子函数来获取query形式的参数
  const [searchparams, setSearchParams] = useSearchParams()
  return <div>News{searchparams.get('id')}</div>
}

/* 
searchparams.get('id')  获取路由参数的值
searchparams.has('id')  判断参数是否存在

setSearchParams({'id':45}) 在当前页面修改路由参数的值
*/
  • params形式传参
import React from 'react'

import { useParams } from 'react-router-dom'

export default function NewsDetail() {
  // 通过useParams 接收params传递的参数
  const params = useParams()
  return <div>NewsDetail{params.id}</div>
}

<Routes>
      {/* element替代了component */}
      <Route path="/home" element={<Home />}></Route>
      <Route path="/course" element={<Course />}>
        {/* 嵌套路由 */}
        {/* index匹配到的父路径 */}
        <Route index element={<Redirect to="/course/js" />}></Route>
        <Route path="js" element={<JsCourse />}></Route>
        <Route path="vue" element={<VueCourse />}></Route>
        <Route path="react" element={<ReactCourse />}></Route>
      </Route>
      {/* 新闻 */}
      <Route path="/news" element={<News />}></Route>
      {/* params形式 */}
      <Route path="/newsdetail/:id" element={<NewsDetail></NewsDetail>}></Route>
      {/* 路由重定向 */}
      <Route path="/" element={<Redirect to="/home" />}></Route>
      {/* 404页面 */}
      <Route path="*" element={<NotFound />}></Route>
    </Routes>

 {/* params形式传参 */}
      <NavLink to="/newsdetail/1">军事新闻</NavLink>
      <NavLink to="/newsdetail/2">体育e新闻</NavLink>
      <NavLink to="/newsdetail/3">娱乐新闻</NavLink>
路由拦截

  • 路由拦截组件封装

    //AuthComponent.js
import React from 'react'
import Redirect from './Redirect'

export default function AuthComponent(props) {
  // 获取当前组件
  const Comp = props.children.type
  return localStorage.getItem('token') ? <Comp /> : <Redirect to="/login" />
}

  • 配置登录拦截

     <Routes>
      {/* element替代了component */}
      <Route
        path="/home"
        element={
          <AuthComponent>
            <Home />
          </AuthComponent>
        }
      ></Route>
      <Route path="/login" element={<Login />}></Route>
      {/* params形式 */}
      <Route path="/newsdetail/:id" element={<NewsDetail></NewsDetail>}></Route>
      {/* 路由重定向 */}
      <Route path="/" element={<Redirect to="/home" />}></Route>
      {/* 404页面 */}
      <Route path="*" element={<NotFound />}></Route>
    </Routes>

  • 登录功能

    import React from 'react'
import { useNavigate } from 'react-router-dom'

export default function Login() {
  const navigate = useNavigate()
  const login = () => {
    localStorage.setItem('token', '112222')
    navigate('/home')
  }
  return (
    <div>
      <button onClick={login}>登录</button>
    </div>
  )
}
路由懒加载
import React, { Suspense } from 'react'

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

// 通过React.lazy函数配合import 函数实现按需导入模块
const Home = React.lazy(() => import('../Home'))
const Course = React.lazy(() => import('../Course'))
const Login = React.lazy(() => import('../Login'))
const News = React.lazy(() => import('../News'))
const NewsDetail = React.lazy(() => import('../NewsDetail'))
const Redirect = React.lazy(() => import('../Redirect'))
const NotFound = React.lazy(() => import('../NotFound'))
const JsCourse = React.lazy(() => import('../JsCourse'))
const VueCourse = React.lazy(() => import('../VueCourse'))
const ReactCourse = React.lazy(() => import('../ReactCourse'))
const AuthComponent = React.lazy(() => import('../AuthComponent'))

export default function MRoute() {
  return (
    // 使用Suspense组件包裹所有路由表
    <Suspense>
      // Routes替代了Switch
      <Routes>
        {/* element替代了component */}
        <Route
          path="/home"
          element={
            <AuthComponent>
              <Home />
            </AuthComponent>
          }
        ></Route>
        <Route path="/course" element={<Course />}>
          {/* 嵌套路由 */}
          {/* index匹配到的父路径 */}
          <Route index element={<Redirect to="/course/js" />}></Route>
          <Route path="js" element={<JsCourse />}></Route>
          <Route path="vue" element={<VueCourse />}></Route>
          <Route path="react" element={<ReactCourse />}></Route>
        </Route>
        {/* 新闻 */}
        <Route path="/news" element={<News />}></Route>
        <Route path="/login" element={<Login />}></Route>
        {/* params形式 */}
        <Route
          path="/newsdetail/:id"
          element={<NewsDetail></NewsDetail>}
        ></Route>
        {/* 路由重定向 */}
        <Route path="/" element={<Redirect to="/home" />}></Route>
        {/* 404页面 */}
        <Route path="*" element={<NotFound />}></Route>
      </Routes>
    </Suspense>
  )
}
useRoutes钩子配置路由

  • 路由懒加载组件封装

    import React, { lazy, Suspense } from 'react'

export default function LazyLoad(path) {
  const Element = lazy(() => import(`./${path}`))
  return (
    <Suspense>
      <Element />
    </Suspense>
  )
}

  • 使用useRoutes钩子将路由转成配置文件

    import React, { Suspense } from 'react'
import { useRoutes } from 'react-router-dom'
import LazyLoad from '../LazyLoad'
import Redirect from '../Redirect'

export default function MRoute() {
  const element = useRoutes([
    {
      path: '/',
      element: <Redirect to="/home"></Redirect>,
    },
    {
      path: '/home',
      element: LazyLoad('Home'),
    },
    {
      path: '/course',
      element: LazyLoad('Course'),

      children: [
        {
          path: 'js',
          element: LazyLoad('JsCourse'),
        },
        {
          path: 'vue',
          element: LazyLoad('VueCourse'),
        },
        {
          path: 'react',
          element: LazyLoad('ReactCourse'),
        },
        {
          path: '',
          element: <Redirect to="/course/js"></Redirect>,
        },
      ],
    },
    {
      path: '/news',
      element: LazyLoad('News'),
    },
    {
      path: '/newsdetail/:id',
      element: LazyLoad('NewsDetail'),
    },
    { path: '*', element: LazyLoad('NotFound') },
  ])

  return element
}
idiot_MAN
关注
专栏目录
React -- router的使用
 我的博客
04-02 225
基本路由的使用： import React from 'react' import { BrowserRouter as Router, // 浏览器路由，要放在应用程序的最外层组件中 Route, // 设置/匹配路由规则 Link, // 设置链接 Switch } from 'react-router-dom' // 组件 function Home() { return <h2>Home</h2> } function About() { re
React Router v6使用路由嵌套和重定向
weixin_64747231的博客
06-14 1234
前言:React Router v5 和 v6 在嵌套路由中实现重定向的方式有所不同。在 v5 中，我们可以使用。而在 v6 中，我们需要使用....。
React Router 升级 v6: Redirect 重定向替代方案
超悠閒的博客
03-03 7712
React Router 升级 v6: Redirect 重定向替代方案 文章目录React Router 升级 v6: Redirect 重定向替代方案React Router v6 Redirect 更新官方推荐方案 1: 使用 Navigate 组件替代官方推荐方案 2: 自定义 Redirect 组件自定义 Redirect 示例: 防止异常跳转并上报完整代码示例参考连接 React Router v6 Redirect 更新 React Router 的第六版做了许多破坏性的更新，其中一个就是将
react router v6实现useHistory与自定义history设计思路
热门推荐
幻日のヨハネ
09-20 1万+
众所周知，/在 v6 版本取消了对的依赖，大幅减负，内部自己实现了更简约、轻量的history，所以不再提供useHistory方法，这会导致：如果从 react router v5 升级，迁移困难。无法使用，新的、学习成本等。为了解决这个问题，本文介绍 三种不同场景 下重新实现useHistory的思路。注：以下我们均指代的是 react router >= 6 的版本。从某种程度上来说，使用UNSAFE_*的 router 内部 context 确实可以解决我们的问题，但也带来了一定的不确定性。
React学习06-React Router 6
Kingrrr的博客行程
12-30 1764
React Router 6
使用react-routerv4v5的平滑滚动恢复_TypeScript_JavaScript_下载.zip
04-28
本资源主要关注`react-router v4`和`v5`版本中的平滑滚动恢复实现，并且提供了TypeScript和JavaScript两种编程语言的实现方式。 在`react-router v4`和`v5`中，平滑滚动恢复可以通过`history`对象的`scrollBehavior...
React-RouterV6+AntdV4实现Menu菜单路由跳转
李白
08-02 4977
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。**注意**useNavigate不能在类组件中使用，如果你非要在类组件中使用，可以使用高阶组件，对类组件进行一个包裹，让原始类组件拥有useNavigate功能。在Menu组件的items中将label的值设置为主页，菜单显示“主页”，同时具备链接跳转功能。组件，类似于Vue中的router-view，在Outlet处会渲染任何匹配到的子路由组件。高阶组件，包裹useNavigate()功能。...
React-Router6版本的更新引起的路由用法变化
sdasadasds的博客
01-18 2567
React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有45.2k的加星，足以说明它是一款非常优秀的库，作为React社区重要的库，它经历了多次迭代和重大更改，就在上个月，更是迎来了一个大的正式版更新6.x，当前最新为6.0.2，相对比于之前的5.x版本做出了较大改变，不管从用法还是从性能上都有了明显的提升，本文也将用新老版本对比的方式让你能以最快的速度上手新用法 话不多说，先列出6.0做出的改变之处： 用法变化 替换为 嵌套路由新写法 推出全新hoo
react-routerv6
最新发布
07-18
它是 React Router v5 的下一个主要版本，旨在提供更简化、更易使用的 API。下面是关于 React Router v6 的一些重要信息： 1. 路由组件：React Router v6 引入了一种新的方式来定义路由组件。它将 `<Route>` 组件...
react-router v6 路由统一管理及路由拦截方案
Ajekseg的博客
02-21 5834
2022-02-18 更新： 添加路由拦截异步处理的支持，通过拦截函数返回一个promise对象的形式使用。 2022-02-11 更新： 优化路由拦截函数的使用，避免循环引用的隐患。 2022-01-13 更新： 重构路由配置列表的配置方式，配置更加简便，且便于后台管理系统的项目根据路由配置自动生成导航菜单。 实现的功能： 全局路由统一管理，支持便捷配置路由重定向、路由懒加载、自定义meta字段等。 全局路由拦截，支持读取路由meta配置，支持拦截跳转其他路由等。 同时也支持嵌套路由、动态路由参数等.
react-router-query-params:React路由器查询参数
05-06
React路由器查询参数 使用用于react-router的模式设置查询参数。 安装 npm install --save react-router-query-params 对等依赖 React react-router v。^ 4.0.0或^ 5.0.0 react-router-dom v。^ 4.0.0或^ 5.0.0 例子 import withQueryParams from 'react-router-query-params' ; ... const ExampleComponent = ( { queryParams , setQueryParams , } ) = ( < div> < div> queryParams: { JSON . stringify ( queryParams ) } < / div >
react-router-query-hooks:使用查询字符串解析的React Router钩子
05-03
使用查询字符串解析的React Router钩子 通过useHistory 库来useLocation基本的钩子（ useLocation和useHistory ）的小程序包，使它们更加了解 。 首先，它导出一个简单的useQueryParams钩子，以读取和操作URL查询字符串（对于在URL中编码有排序顺序或页码的UI有用）。 有关更多详细信息，请参见使用说明。 取决于： query-string 对等依赖react-router-dom@^5.1或更高版本（需要路由器挂钩） 该软件包也是用ES6编写的，因此要使用它，您需要一些编译器，例如babel才能在node_modules上运行。 如何安装 $ npm install react-router-query-hooks react-router-dom 或者 $ yarn add react-router-query-
React--》ReactRouter6相关路由的使用讲解
ztK63LrD的博客
01-31 1609
拥抱变化~，一起学习React Router6中路由的变化吧。
窥视React Router v6
08-16 322
At the time of this writing, React Router v6 is still in alpha, but the time is about right to start playing with it and exploring what’s to come. This guide will give you a peek at the new features/c...
react-router-dom v6版本常用功能小计
Xpy 的博客
03-02 1135
github地址：https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md demo地址：https://stackblitz.com/edit/github-agqlf5 一、安装 npm install react-router-dom@6 二、使用 BrowserRouter, Routes, Route 这里注意与 v5 的区别 Routes 组件替换 v5 的 Switch 组件；
react-router-dom V6
weixin_47431743的博客
04-29 9552
react-router-dom V6 版本更新内容概览
react-router-dom v6
pauline_的博客
12-24 3120
2021.11.4 突然更新v6版本 写demo的时候措不及防 嵌套的组件名字不要纠结!虽然我也觉得login嵌套在Layout里面很奇怪 , 但是不妨碍理解! 官网链接:React Router | Upgrading from v5https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory import { BrowserRouter, Route, Routes, Navigate .
React中router传值之query传值
小马总的博客
02-20 6654
传值方式 router.push({pathname: '/identification', query: {pid, page}}); 接收方式 const { location: { query: { pid, page }, } } = this.props; 送上一波福利 微信公众号开发、企业建站开发、小程序、vue、h5、css3、react等前端视频学...
react路由系列04___路由传值之query
jiang7701037的博客
07-11 2969
此篇文章是基于react路由系列01___ 在react脚手架里使用React-router(简单入门)和react路由系列02___ 二级路由上写的，如果你有路由基础，可以直接看这篇文章，如果没有路由基础，则建议先看前两篇文章。 react路由传参（组件之间传值）_通过query React路由传参的三种方式： 二、通过query（以GoodsList.js为例） 解释：组件之间传...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值