React路由使用详解

最新推荐文章于 2023-02-14 18:01:33 发布
最新推荐文章于 2023-02-14 18:01:33 发布
阅读量450 收藏
点赞数
分类专栏： react 文章标签： reactjs react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/python2021_7/article/details/124089509
版权
本文详细介绍了如何在React项目中使用React Router，包括创建项目、安装依赖、导入和配置路由、路由传参、子路由设置、404页面处理以及实现路由守卫。通过实例展示了如何在App.js中设置路由，以及在子组件中定义和重定向子路由，同时提到了404页面的处理策略和登录权限控制。
摘要由CSDN通过智能技术生成

# 一.创建项目

打开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元/天 解锁文章
清雨扰落瓣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react学习-路由的使用
Bunny的博客
06-15 213
react学习-路由的使用
React Router 6 中的 6 种路由配置方式：数组、代码分割、对象、函数和服务器加载
最新发布
笔记、经验、日常分享
04-21 1742
React Router 6 是一个强大的路由库，提供了多种配置路由的方式，可以满足不同的应用场景和需求。如可以使用 createBrowserRouter 或 createHashRouter 函数，以数组形式定义嵌套路由、使用 useRoutes hook 和 React.createElement，可以在函数组件中动态创建路由配置对象，实现高度灵活和可编程的路由配置。实现类似VueRouter路由的配置方式。
react 路由完整版
weixin_43294560的博客
06-06 2603
import {BrowserRouter} from 'react-router-dom' 1、用BrowserRouter管理整个应用 在index.js中,将<App />用<BrowserRouter>包裹起来 2、路由跳转 import {NavLink,Link} from 'react-router-dom' NavLink和Link都可以实现,且用法相同 <NavLink to='/about'>About</NavLink&g
react——路由
m0_55173487的博客
02-03 5678
前端路由就是把不同路由对应不同的内容或页面对应展示出来。路由可以帮助我们很好的管理页面和代码，增强用户的体验感。路由模式有hash和 history 两种模式，通常用hash模式。在react中，react-router是跨平台的，内置通用组件和通用Hooks。
一文带你搞懂React路由（详解版）
xuxuii的博客
07-09 3277
1️⃣ 单页Web应用（single page web application，SPA）。 2️⃣ 整个应用只有（单页面，多组件）。 3️⃣ 点击页面中的链接页面，只会做页面的。 4️⃣ 数据都需要通过 ajax 请求获取，并在前端异步展现。⭐什么是路由？⭐路由分类：1️⃣后端路由：2️⃣前端路由：⭐前端路由的原理前端路由的实现是依靠 。程序员不直接自己去操作BOM里的history，因为原生的API不好用，所以借助来操作。引入history.js库： 创建history对象： 如何阻止a标签的跳转？点击a
react路由配置方式详解
08-29
React 路由配置方式详解 React 路由配置是 React 应用程序中一个非常重要的部分，它可以帮助我们实现客户端路由，并提供了许多有用的功能，例如参数传递、重定向等。本篇文章将详细介绍 React 路由配置的方式，并...
详解前端路由实现与react-router使用姿势
08-29
详解前端路由实现与react-router使用姿势 前端路由是指在客户端实现的路由机制，用于控制页面之间的跳转和数据交换。在SPA（Single Page Application）开发中，前端路由扮演着至关重要的角色。React Router是目前最...
详解各版本React路由的跳转的方法
11-27
以下是对React-Router各版本中路由跳转方法的详解。 1. React-Router 2.0.0 版本： 在2.0.0版本中，使用`browserHistory`来进行页面的跳转。`browserHistory`是React-Router提供的一个历史记录管理器，它基于浏览器...
react router 4.0以上的路由应用详解
08-29
`HashRouter`是React Router提供的一种历史管理方式，它使用URL哈希来跟踪路由变化。以下是一个基本的配置示例： ```jsx import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { ...
React 路由
h360583690的博客
02-21 817
react路由分为三类，WEB，NATIVE，ANYWHERE，
React 路由使用
360技术
05-31 529
Routerreact-router-dom是一个处理页面跳转的三方库，在使用之前需要先安装到我们的项目中：#npm npminstallreact-router-dom@6 #yarn yarnaddreact-router-dom@6简单路由使用路由时需要为组件指定一个路由的path，最终会以path为基础，进行页面的跳转。具体使用先看个简单示例，该示例比较...
React学习（三）——Router路由的使用和页面跳转
热门推荐
daxiazouyizou的博客
03-30 2万+
    大家好，我是凯文，本篇文章内容是关于React框架中的路由“Router”和跳转功能进行讲解。    React-Router的中文文档可以参照如下链接：        http://react-guide.github.io/react-router-cn/docs/Introduction.html    文档中介绍的很详细，下面将通过个人视角介绍Router的用法，并通过实例来呈现，...
react路由
z27566的博客
02-14 331
1：首先安装安装可以指定版本，我安装的是6版本的。
react路由是怎么使用的？
南漂一枚
11-23 210
react-router-dom组件的使用
014 React路由-Hash模式-推荐
test253506088的博客
06-21 2003
路由是根据uri的不同来切换对应的组件，实现spa（单页面应用），在页面切换的时候不会刷新，更加接近原生体验。 先来安装路由的组件，下载哪个都行 npm i --save react-router-dom #功能更全 npm i --save react-router #适合线上环境 ...
react路由使用
前端菜鸟
06-04 8925
1：插件添加 cnpm install react-router-dom -S 2：app.js书写 import React, { Component } from 'react'; //路由的2种形式： hash(HashRouter) , H5的historyApi(BroswerRouter)是路由的容器，是组件，要包在路由的外面 import { HashRouter ...
react路由的安装及格式和使用方法
weixin_30824277的博客
09-01 176
react路由的安装： 在要创建项目的目录命令窗里输入： cnpm install -g create-react-app create-react-app 项目名 在创建好的项目目录命令窗里输入： cnpm install react-router-dom --save（此处可以不用--save但是为了方便别人调用你的包时。更快捷的安装好依赖包，我们就得要写了，（cnpm insta...
ts+react路由react-router-dom
weixin_42429288的1博客
07-01 5046
记录自己项目中写的内容 路由入口是一个组件， 路由出口用Switch包着，大概如下 <TopNavigationBarWithRoute routePath={this.state.routePath} /> <Switch>{this.renderAllRoutes()}</Switch> //我们看一下 this.state.routePath const routePath: IR
React路由鉴权的实现方法
10-16
主要介绍了React路由鉴权的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值