React 路由react-router-dom详解

已于 2023-04-08 16:50:46 修改
阅读量6.1k 收藏 38
点赞数 14
分类专栏： react react-router-dom 文章标签： react.js 前端 javascript 前端框架
于 2023-04-08 11:48:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64875238/article/details/130024751
版权

React 路由react-router-dom详解

( 路由嵌套 + 路由传参 + 路由权限 + 路由优化 按需导入 + 404页面 )

前面我们先了解一下 路由是什么？ 路由分类有哪些？内置API有哪些？
可能有点枯燥，不喜欢看的直接跳过！

1，相关理解

  1. 单页Web应用（single page web application，SPA）。
  2. 整个应用只有一个完整的页面。
  3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。
  4. 数据都需要通过ajax请求获取, 并在前端异步展现。

2，路由的理解：

1. 什么是路由?
  1. 一个路由就是一个映射关系(key:value)
  2. key为路径, value可能是function或component

2，react-router-dom的理解：

  1. react的一个插件库。
  2. 专门用来实现一个SPA应用。
  3. 基于react的项目基本都会用到此库。

一，基本路由使用：

先看看效果：

在这里插入图片描述

1，下载安装：

  1. win + R

  2. cmd 打开
    在这里插入图片描述

  3. cd/react项目文件目录
    在这里插入图片描述

  4. 安装：

 npm  i react-router-dom -S

在这里插入图片描述

很好，你已经完成了，安装！

二， 接下来是使用路由的步骤

文件
在这里插入图片描述

1， 创建页面

在 src路径下新建views文件，页面组件新建在这里面

在这里插入图片描述

2，新建路由文件

在 src路径下 新建router文件夹，在这里配置路由

在这里插入图片描述

3，配置路由文件：

在 router路径下 新建index.jsx文件夹，在这里配置路由

在这里插入图片描述

  1. 导入路由依赖
// 导入路由依赖
import { useRoutes } from "react-router-dom";
  1. 导入所需组件，首页 关于
// 导入所需组件，首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
  1. 创建路由
// 创建路由
const routes = [
  {
    path: "/",
    element: (<HomeView></HomeView>)
  },
  {
    path: "/about",
    element: (<AboutView ></AboutView >)
  },
];
  1. 使用useRoutes 创建，导出路由
// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

完整代码：
在这里插入图片描述

以上配置是路由基础配置：
这样还是看不到效果的，要配置导航使用路由

4，使用并切换路由，配置App.jsx文件：

路径：src / App.jsx

  1. 导入：
import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";

Router： 路由

RouterView： 路由组件 ，导入路由文件

HashRouter： 哈希路由

NavLink： 导航链接

  1. 使用，配置导航链接，这里使用 函数组件：

全部代码：

import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";

function App() {
  return (
    <Router>
      <NavLink to="/">首页</NavLink> &emsp;||&emsp;
      <NavLink to="/about">关于</NavLink> &emsp;||&emsp;
      <RouterView />
    </Router>
  );
}

export default App;
  1. 效果图：
    在这里插入图片描述

三， 路由传参：

1，路由文件配置：

在这里插入图片描述

2，组件使用：

ProductView.jsx文件配置：

  1. 引入useParams

这里我新建了一个组件 ProductView.jsx

 import { useParams } from "react-router-dom"
  1. 获取参数
  const { id } = useParams()
  1. 渲染参数：
    <h1>产品参数：{id}</h1>
ProductView.jsx 文件代码：

在这里插入图片描述

App.jsx 文件配置：

传参：

<NavLink to="/product/123">产品123</NavLink> &emsp;||&emsp;
<NavLink to="/product/456">产品456</NavLink> &emsp;||&emsp;
App.jsx 文件代码：

在这里插入图片描述

效果：
在这里插入图片描述

四， 路由嵌套：

  1. 路由文件配置：src / router / index.jsx
// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件，首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
// 组件嵌套组件
import Private from "./Private";
// 创建路由
const routes = [
  {
    path: "/",
    element: <HomeView></HomeView>
  },
  {
    path: "/about",
     element: <AboutView></AboutView>
  },
  {
    path: "/product/:id",
    element: <ProductView></ProductView>
  },
  {
    path: "/admin",
    element:  <AdminView />
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView></DashView>
      },
      {
        path: "orderlist",
        element: <OrderList></OrderList>
      }
    ]
  },


// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}
  1. 组件文件配置：

新建文件 以下图：
在这里插入图片描述

views / AdminView.jsx文件：

import { NavLink, Outlet } from "react-router-dom";
function AdminView() {
  return (
    <div>
      <h3>管理页面</h3>
      <NavLink to="">管理页面</NavLink>&emsp;||&emsp;
      <NavLink to="orderlist">概览页面</NavLink>
      <Outlet />
    </div>
  );
}
export default AdminView;

NavLink ：导航链接
Outlet： 子组件容器

views / DashView.jsx文件：

function DashView() {
    return ( <div>
        <h3>概览页面内容</h3>
    </div> );
}
export default DashView;

views / OrderList.jsx文件：

function OrderList() {
    return (<div>
        <h3>管理页面内容</h3>
    </div>);
}
export default OrderList;

效果图：

在这里插入图片描述

五， 路由查询参数：

1， App.jsx文件 导航配置：

在这里插入图片描述
代码：

import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom"

function App() {
    return (<Router>
        <NavLink to="/">首页</NavLink >  &emsp;||&emsp;
        <NavLink to="/about">关于</NavLink> &emsp;||&emsp;
        <NavLink to="/admin">admin页面</NavLink> &emsp;||&emsp;
        <NavLink to="/product/123">产品123</NavLink> &emsp;||&emsp;
        <NavLink to="/product/456">产品456</NavLink> &emsp;||&emsp;
        <NavLink to="/about?redirect=hello">产品hello</NavLink> &emsp;||&emsp;
        <NavLink to="/about?redirect=word">产品word</NavLink> &emsp;||&emsp;
        <RouterView></RouterView>
    </Router>);
}
export default App;

传参：?redirect= “ 传的查询参数 ”

2，AboutView.jsx 文件：

代码：

import { useSearchParams, NavLink, useNavigate, useLocation } from "react-router-dom"
function AboutView() {
    // 获取about查询参数redirect的值
    const [SearchParams] = useSearchParams()
    // 获取redirect的值
    const redirect = SearchParams.get('redirect')
    // 渲染
    return (<div>
         {/* // 传递查询参数 */}
        <h1>About页面查询参数：-{redirect}</h1>
    </div>);
}

// 导出组件
export default AboutView;

六，组件按需导入（懒加载）：

用于 性能优化。
lazy方法， subspense组件

1，定义懒加载组件router / LazyLoad.jsx

// 动态加载组件
import { lazy, Suspense } from "react";
// 动态加载组件 方法
function LazyLoad(url) {
  // 配置动态加载组件路径
  const Element = lazy(() => import(url));
  return (
    // 返回组件，Suspense:懒加载组件
    <Suspense fallback={<h3>加载中. . . </h3>}>
      {/* 内容组件 */}
      <Element />
    </Suspense>
  );
}
// 导出方法
export default LazyLoad;

2，路由router / index.jsx文件使用：

引入：
// 导入懒加载组件方法
import LazyLoad from "./LazyLoad";
使用：
element: LazyLoad("../views/HomeView")
router / index.jsx文件 代码：
// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件，首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";

// 创建路由
const routes = [
  {
    path: "/",
    element: ("../views/HomeView")
  },
  {
    path: "/about",
    element: ("../views/AboutView")
  },
  {
    path: "/product/:id",
    element: ("../views/ProductView")
  },
  {
    path: "/admin",
    element:  <Private><AdminView /></Private>,
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView></DashView>
      },
      {
        path: "orderlist",
        element: <OrderList></OrderList>
      }
    ]
  },

];
// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}
效果图：

按需加载

在这里插入图片描述

七，路由权限：

类似于Vue里的路由守卫：未登陆 不能打开一些页面
有权限返回子组件，没有权限跳转到登录

1，定义权限组件router/Private.jsx

本地存储有 token，就有权限，
没有token，就没有权限

import {Navigate} from "react-router-dom"
// 权限路由
function Private(props) {
    if(localStorage.getItem("token")) {
        return <>{props.children}</> ;
    }else {
        return <Navigate to="/" />
    }
}

export default Private;

2，路由index . jsx文件使用：

权限组件包裹着 内容组件
element: < Private>< AdminView /></ Private>,

// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件，首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
import Private from "./Private";
import LazyLoad from "./LazyLoad";
// 创建路由
const routes = [
  {
    path: "/",
    element: LazyLoad("../views/HomeView")
  },
  {
    path: "/about",
    element: LazyLoad("../views/AboutView")
  },
  {
    path: "/product/:id",
    element: LazyLoad("../views/ProductView")
  },
  {
    path: "/admin",
    element:  <Private><AdminView /></Private>,
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView></DashView>
      },
      {
        path: "orderlist",
        element: <OrderList></OrderList>
      }
    ]
  },

];
// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}
效果图：

在这里插入图片描述

八，设置404错误页面：

1，新建404组件文件 src / views / NoMatch.jsx :

import { NavLink } from "react-router-dom"
function NoMatch() {
    return (<div>
        <h1>你的页面被😽偷走了!</h1>
        <NavLink to="/">首页</NavLink>
    </div>);
}
export default NoMatch;

2，路由配置，src / router / index.jsx :

// 配置404页面
{
path: “*”,
element:
}
path 值为 *

// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件，首页  关于
import NoMatch from "../views/NoMatch";
import HomeView from "../views/HomeView";
// import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
// 导入权限组件
import Private from "./Private";
// 导入懒加载组件方法
import LazyLoad from "./LazyLoad";
// 创建路由
const routes = [
  {
    path: "/",
    element: LazyLoad("../views/HomeView")
  },
  {
    path: "/about",
    element: LazyLoad("../views/AboutView")
  },
  {
    path: "/product/:id",
    element: LazyLoad("../views/ProductView")
  },
  {
    path: "/admin",
    element: ( <Private><AdminView /></Private>),
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView/>
      },
      {
        path: "orderlist",
        element: <OrderList/>
      }
    ]
  },
  // 配置404页面
  {
    path: "*",
    element: <NoMatch />
  }
];

// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}
效果图：

在这里插入图片描述

总结：

路由组件与方法：

  1. 组件

    < HashRouter> 哈希路由
    < BrowserRouter> 浏览器路由
    < NavLink> 导航链接
    选中会有active 类名
    < Link>导航链接
    < OutLet>子路由容器

  2. 方法

    useRoutes使用路由配置
    useParams() 路由参数
    useSearchParams() 获取查询参数

在这里插入图片描述
邢帥兵_
关注
  • 14
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
SimpleRouteWithReact:这是一个简单的网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据
05-20
这是一个简单的React网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据。 入门 使用此应用之前，请检查您的PC是否具有reactJs工作环境。 打开Git Bash。 将当前工作目录更改为要克隆目录的位置。 使用以下命令进行克隆：git clone 在运行应用程序之前，请安装react-router-dom和axios npm install react-router-dom npm安装axios 可用脚本 在项目目录中，可以运行： yarn start或npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。
【React】react-router-dom中的HashRouter和BrowserRouter实现原理
weixin_45620943的博客
01-05 1307
在之前整理BOM的五个对象location.hash发生改变后，会触发hashchange事件，且history栈中会增加一条记录，但页面不会重新加载——实现HashRouter的关键URL)执行后，history栈中会增加一条记录，但页面不会重新加载，回退（history.back()或history.go(-1)）会触发popstate事件，location.pathname发生改变——实现BrowserRouter的关键本篇通过举例方式详细描述实现的过程。
使用 react-router-dom v6.22 的 useRoutes 路由表
JudithHuang的博客
03-29 468
我们可以在 React 应用程序中使用useRoutes钩子来管理路由配置。这种方式使得路由的定义和渲染更加简单和灵活，有助于更好地组织和维护项目中的路由结构。
react-router-basic-use:React Router和React Router Dom的基本用法
05-15
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） 添加图像，字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导程序使用自定义主题 增加流量 添加自定义环境变量 在HTML中引用环境变量 在Shell中添加临时环境变量 在.env添加开发环境变量 我可以使用装饰器吗？ 与API后端集成 节点 Ruby on Rails 在开发中代理API请求 配置代理后出现“无效的主机头”错误 手动配置代理 配置WebSocket代理 在开发中使用HTTPS 在服务器上生成动态<meta>标记 预渲染为静态HTML文件 将数据从服务器注入
koa-react-router：用于koa 2的react-router中间件
02-03
koaReact路由器 koa 2中间件，用于React服务器端渲染和使用。 寻找对React Router 3的支持，请参阅文档。 尝试React Router 5，尽管它很棒！ 用法 要安装koa-react-router ： npm install koa-react-router react react-dom react-router --save 注意： react react-dom和react-router都是koa-react-router peerDependencies 。 可以将koa-react-router轻松安装在koa 2应用程序中，如下所示： // index.js import Koa from 'koa' ; import reactrouter from 'koa-react-router' ; import App from './App' ; import Container from './containers/PageContainer' ; const app = new Koa ( ) ; app
React的路由——react-router-dom
m0_48982503的博客
11-15 819
安装 cnpm i react-router-dom -S； npm i react-router-dom -S 引入 hash路由：HashRouter import { HashRouter } from 'react-router-dom' history路由：BrowserRouter import { HistoryRouter } from 'react-router-dom' 注意 路由的所有配置项必须在HashRouter...
react中react-router-dom的使用方法
mmmawo的博客
11-17 1111
react中的路由介绍 现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面） 前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系 使用 React 路由简单来说就是：配置路径和组件（配对） React路由使用的基本 ...
React 之 react-router-dom
subsistent的博客
08-19 3325
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。
React-路由 react-router-dom
廖若星辰-LTY
08-25 6400
React 路由 react-router-dom BrowserRouter Routes Route Link useNavigate useSearchParams useParams useRoutes 声明式导航 编程式导航 路由传参 默认路由 路由嵌套
react-router-dom的基本使用
努力下来就凸头
10-25 2894
react-router-dom5和react-router-dom6一篇就够了
【React】react-router-dom
南栀的博客
05-12 2191
路由
react-router:react-router 中文文档
04-29
react-router-dom React路由器的DOM绑定 react-router-native 用于React路由器的React Native绑定 react-router-redux Integration with React Router and Redux react-router-config 静态路由配置助手 About react-...
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文|使用缓存为Vue中的keep-alive类的react-router 。如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案...
react-router-dom-demo
07-21
react-router-dom 通过Link传值的坑人表现: Link可以通过state传递参数到下一页, 但如果是新窗口打开就不可以用state传递, 可以通过url传递参数
react-mobx-react-router4-样板板：React，React-Router 4，MobX5，Webpack4，Code-Splitting，Prettier，ESlint，Prerender
02-03
Webpack4升级完全指南webpack4官方已经于近日升级到了V4.5的稳定版本，对应的一些必备插件（webpack-contrib）也陆续完成了更新支持，笔者在第一时间完成了项目由V3到V4的迁移，在此记录一下升级过程中遇到的种种...
react-router-dom 嵌套路由的实现
10-15
主要介绍了react-router-dom 嵌套路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
React vs React Native写法上的不同
Ranye的博客
04-23 661
从标签和样式两个角度，快速从react过渡到react native
vue3中的reactive、readonly和shallowReactive
最新发布
weixin_43784341的博客
04-29 362
这些函数提供了不同级别的响应式对象，你可以根据需求选择合适的函数来创建对象。在实际应用中，你可以将这些响应式对象用于组件的状态管理、数据传递等场景，从而实现更加灵活和高效的 Vue 应用程序。是用于创建响应式对象的函数，它们可以帮助管理组件状态和数据流。在 Vue 3 中，
react实现时钟翻牌效果
qq_39933787的博客
04-24 310
解决方案：通过判断数字改变（这里通过新旧数值变动来判断，不贴代码啦），每次变动的时候手动把animationIterationCount设置为infinite（持续动画），半秒后改为1（动画只执行一次），需求：随着数字的变动要求有时钟翻动动效。问题：只在加载时有动效。
react 最新版本 匹配的 react-dom react-router-dom
06-03
当前最新版本的React是17.x，React Router最新版本是6.x，React Router DOM最新版本也是6.x。 React和React DOM的版本应该是匹配的，因为它们是同时发布的。React Router DOM是基于React Router的，所以React Router DOM的版本也应该与React Router的版本匹配。 以下是React、React DOM和React Router DOM最新版本的版本号： - React 17.x - React DOM 17.x - React Router DOM 6.x 如果您在使用React Router时遇到了问题，还应该确保React和React Router的版本匹配。如果您使用的是旧版本的React Router，请查看React Router官方文档以获取有关版本兼容性的更多信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值