React路由使用详解

最新推荐文章于 2025-08-08 18:11:24 发布
原创 最新推荐文章于 2025-08-08 18:11:24 发布 · 548 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#reactjs #react

本文详细介绍了如何在React项目中使用React Router，包括创建项目、安装依赖、导入和配置路由、路由传参、子路由设置、404页面处理以及实现路由守卫。通过实例展示了如何在App.js中设置路由，以及在子组件中定义和重定向子路由，同时提到了404页面的处理策略和登录权限控制。

# 一.创建项目

打开cmd选择到需要创建的盘，我这里选择是的e盘

输入创建项目的指令

create-react-app 项目名

接下来安装项目所需要用到的插件

这里我安装的axios,qs,mokejs,并且项目文件夹需要安装:npm i react-router-dom@5.0 -S(指定5.0版本)安装指令如下

npm i axios qs react-router-dom@5.0
npm i mockjs -D

 

 这个项目需要用到

安装指令

npm i antd -S

最低0.47元/天 解锁文章
React(五) —— 路由的使用
旺仔好吃糖的博客
03-19 1750
📍路由是根据不同的 url 地址显示不同的内容或页面📍一个针对React而设计的路由解决方案，可以友好的帮助解决React components到URL之间的同步映射关系。
react路由详解
m0_56947432的博客
07-07 1109
​ 比如:用户要看首页,我们就让用户点击一个指向首页的a标签,点击之后,浏览器地址栏的路径会发生变化. 我们就可以通过最新的路径,去判断用户要看哪个页面视图. /home 表示用户要查看首页. 当路径是/detail的时候,表示用户要看详情页。实现单页面应用的原理: 只加载一个html页面(整个网站所有的视图(每一个单独页面))都包含在这个html页面中.当用户要打开首页的时候,就只展示首页对应的视图,其他的隐藏.当用户要查看详情页的时候,只展示详情页视图,其他的视图隐藏。
React路由的使用
xiuxiuxiu555的博客
04-09 1467
路由守卫/404/路由传参/路由跳转/子路由
react路由使用方法
weixin_46560512的博客
05-05 1403
react路由常用方法 一、router安装与基础路由 二、路由跳转 三、路由参数 四、路由嵌套
react路由配置方式详解
08-29
React 路由配置方式详解 React 路由配置是 React 应用程序中一个非常重要的部分，它可以帮助我们实现客户端路由，并提供了许多有用的功能，例如参数传递、重定向等。本篇文章将详细介绍 React 路由配置的方式，并...
React 路由组件 详解
YuLong的博客
10-24 2660
文章目录路由组件1、HashRouter和BrowserRouter2、Route3、Router4、Link和NavLink5、Redirect6、Switch7、withRouter嵌套路由向路由组件传递参数路由跳转的两种模式编程式路由导航Router Hooks 路由组件 路由组件与一般组件区别： 1、写法不同： 一般组件：<Demo/> 路由组件：<Route path="/demo" component={Demo}/> 2、存放位置不同： 一般组件：compone
react 路由使用
id9426的博客
08-08 732
通过 React Router，你可以轻松实现复杂的单页应用（SPA）路由需求！组件实现无刷新跳转（替代。父路由下定义子路由，需用。
react学习-路由的使用
Bunny的博客
06-15 436
react学习-路由的使用
react路由使用方式
weixin_43992788的博客
08-16 602
一、react路由的基本使用 1、明确好界面中的导航区，展示区。 2、导航区的a标签改为Link标签 3、展示区写Router标签进行路经匹配 4、的最外侧包裹了一个或者 二、路由组件与一般组件的区别 1、写法不同： 一般组件： 路由组件: 2、存放位置不同 一般组件：components 路由组件:pages views 3、接收到的props不同 一般组件：写组件标签是传递了什么，就能收到什么 路由组件：接收到三个固定的属性 history: go goBack goForward push rep
react 路由的使用
liuli0927的博客
09-20 502
/to={`/home/message/detail/${item.id}`}这样就能把id传给组件。需要再App.js外面抱一个路由模式，是BrowserRouter还是HashRouter模式，在index.js中写入以下代码。//Detail组件直接从props接收就可以了（props.match.params里面）例如：头部组件是一个一般组件，想使用路由组件身上的api，需要在一般组件引入。例如：右侧内容区路径为home，右侧 导航就叫/home/news。//可以进行push前进到那个页面。
react中的路由使用
yunchao1004的博客
02-23 562
前言 使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在最新React中，使用的是react-router-dom。本文主要针对react-router-dom进行说明。 安装 首先进入项目目录，打开终端，使用npm安装react-router-dom： npm install react-router-dom --save-dev 操作配置 打开项目目录中的src文...
React路由
2301_76662406的博客
11-10 3689
用于获取 URL 路径中的参数。返回一个对象，其中包含当前路由路径中定义的动态参数。特点声明式导航编程式导航实现方式使用或组件使用或history灵活性相对固定,更加直观高度灵活，支持条件导航适用场景静态链接动态路由逻辑和条件导航状态管理自动处理活动状态需手动管理状态HashRouter：适合简单应用，易于配置，但在 SEO 和 URL 美观性方面存在限制。：适合复杂应用，支持现代特性，但需要额外的服务器配置以避免 404 错误。特点HashRouter。
react中路由的基本使用
dongwang的博客
10-17 232
React路由基本用法
u012475786的专栏
01-28 9384
React路由基本用法 1.React Router4.0基本概述： React Router4.0（以下简称 RR4）遵循React的设计理念，即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件（还有若干对象和方法），具有声明式（声明式编程简单来讲就是你只需要关心做什么，而无需关心如何去做，可组合性的特点。 RR4 采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有...
React 路由的基本使用
天天的博客
07-12 396
我们坚持写笔记， 因为只要笔记不停，就代表我们还没有放弃 import React, { Component } from "react" import { Link, Route, BrowserRouter } from "react-router-dom" import UserPager from "./UserPager" import HomePager from "./HomePage" // 默认导出就行了 export default class ReactRouter exte
React 路由使用
360技术
05-31 656
Routerreact-router-dom是一个处理页面跳转的三方库，在使用之前需要先安装到我们的项目中：#npm npminstallreact-router-dom@6 #yarn yarnaddreact-router-dom@6简单路由使用路由时需要为组件指定一个路由的path，最终会以path为基础，进行页面的跳转。具体使用先看个简单示例，该示例比较...
react的路由详解
最新发布
08-23
### React路由的使用详解及原理说明 React 路由是实现单页应用（SPA）的重要工具之一，它允许开发者在不刷新页面的情况下切换视图。React Router 是 React 生态中广泛使用的路由库，它通过管理路由匹配、导航和渲染组件来实现这一功能。 #### 路由的基本原理 前端路由的核心在于**路径与组件的映射关系**，当路径变化时，路由系统会匹配当前路径并渲染对应的组件。在单页应用中，页面切换不会触发页面刷新，而是通过 JavaScript 动态更新页面内容。React Router 通过监听浏览器的 `history` 对象来实现路径变化的检测，并根据路径匹配对应的组件进行渲染。 React Router 提供了两种主要的路由实现方式： 1. **BrowserRouter**：基于 HTML5 的 `history` API，使用 `pushState` 和 `replaceState` 方法实现路径变化，路径看起来是正常的 URL（如 `/users/123`）。 2. **HashRouter**：基于 URL 的 hash 部分（如 `/#/users/123`），兼容性更好，但在现代浏览器中较少使用[^4]。 #### React Router 的核心组件 React Router 提供了多个核心组件来实现路由功能： - **`<Route>`**：定义路由路径与组件的映射关系。它支持三种渲染方式： - `component`：当路径匹配时，渲染指定的组件。 - `render`：内联函数方式渲染组件，适合需要传递额外 props 的场景。 - `children`：无论路径是否匹配，都会调用该函数，适用于包装组件的场景[^3]。 - **`<Link>`**：用于导航的组件，类似于 HTML 中的 `<a>` 标签，但不会触发页面刷新。 - **`<Switch>`**：用于包裹多个 `<Route>`，确保只有一个路由被渲染，提升匹配效率。路径匹配时，`<Switch>` 会按顺序查找第一个匹配的 `<Route>` 并渲染，忽略后续匹配的路径[^5]。 - **`<Redirect>`**：用于路径重定向，当当前路径匹配时，自动跳转到另一个路径。 #### 路由的配置与使用 在 React 项目中，通常使用 `react-router-dom` 库来实现路由功能。以下是典型的路由配置示例： ```jsx import React from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; const Home = () => <h2>Home</h2>; const About = () => <h2>About</h2>; const App = () => ( <Router> <div> <nav> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> </ul> </nav> <Switch> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </Switch> </div> </Router> ); export default App; ``` #### 路由的底层实现机制 React Router 的核心实现依赖于 `history` 对象，它负责管理浏览器的历史记录。`history` 对象提供了 `push`、`replace` 和 `goBack` 等方法，用于控制页面导航。React Router 通过监听 `history` 的变化来触发组件的重新渲染。 在 `BrowserRouter` 中，`history` 对象是基于 HTML5 的 `history` API 实现的。当用户点击 `<Link>` 组件时，React Router 会调用 `history.pushState()` 方法更新 URL，而不会导致页面刷新。随后，路由系统会匹配新的路径，并渲染对应的组件。 #### 路由的高级用法 React Router 还支持嵌套路由、动态路由、路由守卫等高级功能： - **嵌套路由**：通过在父组件中定义子路由，实现多级页面结构。 - **动态路由**：使用参数（如 `:id`）捕获路径中的动态部分。 - **路由守卫**：通过 `withRouter` 高阶组件或自定义钩子函数实现权限控制。 #### 相关问题 1. React Router 如何实现动态路由匹配？ 2. 如何在 React 路由中实现权限验证？ 3. React Router 的 BrowserRouter 和 HashRouter 有什么区别？ 4. 如何在 React 路由中实现懒加载？ 5. React Router 的 Switch 组件有什么作用？
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值