学习记录——react路由 react-router-dom基本使用

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

#reactjs

本文详细介绍了React Router DOM的主要组件，包括BrowserRouter、Switch、Route、Link以及Redirect和NavLink的用法。BrowserRouter作为应用的顶级容器，Switch用于匹配路径，Route用于定义路径映射，Link创建导航链接，Redirect实现路径重定向，而NavLink则提供了激活状态的样式支持。了解这些核心概念，能帮助开发者更好地构建React应用的路由系统。

下载 npm install react-router-dom

在这里插入图片描述

BrowserRouter as Router：as关键字，用来给导入的变量设置新的名字
BrowserRouter：最外层的组件，可以理解为一个容器，用来放Route、Link，里面只能有一个节点
Switch：包裹Route，匹配与当前访问地址匹配的Route
Route：用来匹配浏览器的路径
Link:相当于a链接

在这里插入图片描述
Redirect重定向，
在输入的路径没有与之匹配的组件的时候，自动匹配Redirect标签里设置的组件
在这里插入图片描述
NavLink，和Link差不多，会自动加一个active类名，可以给他设置样式
在这里插入图片描述
给active随便写个样式
在这里插入图片描述
使用NavLink标签
在这里插入图片描述

react-router-dom 记录
无缺的博客
04-07 360
参考：https://www.jianshu.com/p/fb201f82cf8c 安装 react-router-dom npm install react-router-dom 一.基本使用 App.js import React from 'react' import { BrowserRouter as Router, Route, Link, Switch } from '...
React 路由基础--React路由介绍
m0_54088431的博客
11-08 5015
两种常用的路由模式：BrowserRouter和HashRouter声明当前要用是一个非hash的模式的路由包裹整个应用一个React应用只需要使用一次HashRouter，hash模式的路由一个有#（HashRouter），一个一带#（BrowserRouter）（推荐）Link指定导航链接，完成路由跳转to属性指定路由地址，最终被渲染为a标签Routes提供一个路由出口，满足条件的路由组件，会渲染到组件内部Route用于指定路由组件和路由地址path：路由组件对应的路径；
react-tips1: import {BrowserRouter as Router , Route, Switch, Link } from 'react-router-dom';
cvper's world !
02-18 3042
React 引入模块使用了 es6 的 import 的方式， 在 示例中有如下代码： import {BrowserRouter as Router , Route, Switch, Link } from 'react-router-dom'; 上面使用了 import 语法，但是我们看到中间有个 as 的使用， 这个 as 的意思是给当前的名字起一个小名，别名； 我们原本是要引入...
React之路由
努力让自己幸运...
01-15 1万+
路由 安装 先用create-react-app生成一个react项目 进入该项目 安装包 react-router-dom 分为2种模式：hash(哈希)，browser(浏览器的那种，H5提供的API) 认识路由 路由模块，需要一个路由容器，标识着使用了那种模式的路由 import {容器} from "react-router-dom"; // 容器中存放的就是路由：HashRouter...
React-Router之BrowserRouter 与 HashRouter切分方式和基本概念
weixin_45966674的博客
10-30 604
他们的实现原理不同 HashRouter用的是锚点链接 BrowserRouter则用的是H5的新特性 具体的可以自己去找。首先 他们的表现形式不同 BrowserRouter 是 / 而 HashRouter是 /#/因为我们现在用的是BrowserRouter 的路由形式 我们可以换成HashRouter来实现这个效果。明显的发现 他的路径前面有一个 井号。可以看到 我们的形式是 /路由代理名。这里 我们有两个路由 对应两个组件。
React Router 6 中的 6 种路由配置方式：数组、代码分割、对象、函数和服务器加载
最新发布
笔记、经验、日常分享
04-21 4788
React Router 6 是一个强大的路由库，提供了多种配置路由的方式，可以满足不同的应用场景和需求。如可以使用 createBrowserRouter 或 createHashRouter 函数，以数组形式定义嵌套路由、使用 useRoutes hook 和 React.createElement，可以在函数组件中动态创建路由配置对象，实现高度灵活和可编程的路由配置。实现类似VueRouter路由的配置方式。
create react app 使用BrowserRouter界面跳转
世幻水的博客
12-06 4222
本文将讲述在create react app中 使用BrowserRouter绑定URL和界面 使用Link标签跳转 使用history在js中实现跳转。 目录 项目结构 1、react-router-dom的安装 2、填写代码 3、路由绑定测试 4、使用Link 标签进行跳转 5、在js中跳转（history） 项目结构 假设在项目中我们有两个界面，我们需要两个路由来完成页面的分配。我们常常使用pages文件夹区分不同界面。 1、react-router-dom的安装 在项目工程中输入一下代
react-router HashRouter和BrowserRouter的使用
落草为寇的海带王
07-27 2万+
官网推荐的是BrowserRouter，但是此方式需要服务器配合，而且有点不好的是重定向只能到首页，无法停留在当前页，具体用法很简单，举例说明。 示例网站（使用HashRouter） HashRouter//react-router要求只只有一个字节点 //router内部的Link和Route会一一匹配，匹配到则加载对应的组件 //to 和 Route 的path是一样的（除了/结尾） //
初探 React Router 4.0
热门推荐
大灰狼的小绵羊哥哥的博客
04-04 7万+
React Router 4.0 （以下简称 RR4） 已经正式发布，它遵循React的设计理念，即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件（还有若干对象和方法），具有声明式（引入即用），可组合性的特点。http://www.jianshu.com/p/e3adc9b5f75c RR4 本次采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有若干相互独立的包
react router中HashRouter和BrowserRouter的区别和使用场景
程序员良仔
05-08 8915
前言 目录前言一、使用场景二、使用方法三、总结 一、使用场景 二、使用方法 三、总结 你可能感兴趣的文章： vue中组件间通讯的8种方法
React-router 中的BrowserRouter 和 HashRouter
aaa333qwe的博客
03-14 5176
前两节的DEMO，都是 HashRouter，而非 BrowserRouter ，二者有所不同。以下解释的前提是你要懂什么叫 hash 地址，hash 地址就是指 # 号后面的 url。假如有一个 Link 标签，点击后跳转到 /abc/def。BrowserRouter： http://localhost:8080/abc/defHashRouter： http://localhost:8080...
react-router之BrowserRouter用法
weixin_30323631的博客
09-22 2667
1.代码 import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter as Router,Route,Link} from 'react-router-dom'; class A extends React.Component { constructor (props){ ...
react路由基础（Router、Link和Route）
mapbar_front的博客
05-30 3万+
Facebook对react进行持续的改进，路由作为其中最重要的一部分，在4.0版本对其进行了大量的优化，总的来说，简单易用！ 之前使用react路由的时候，我们引入的是react-router包。 现在改版之后，我们引入的包是react-router-dom包。改版之后的react-router-dom路由，我们要理解三个概念，Router、Route和Link。1、Router Route
react-router v4中 HashRouter 和 BrowserRouter的使用
dingdabao8888的博客
05-10 1381
遇到的问题 项目中控制路由跳转使用的是BrowserRouter，代码如下： ReactDOM.render(( <BrowserRouter> <div className="container"> <Route path={routePaths.INDEX} exact component={...
React-router( 路由 HashRouter 和 BrowserRouter 模式)
lllllllwj的博客
05-14 5767
react-router 我们使用的是4.+版本，使用的是react-router-dom react-router是3.x的版本 路由的模式有两种 老浏览器提供的 hash模式， 我们称之为： HashRouter H5提供的的 history 模式，我们称之为 BrowserRouter 注意： H5模式的路由需要后端支持 使用路由 在index.js中使用路由模式将组...
RouterRouter中的HashRouter和BrowserRouter之间的区别
逍遥-小子的博客
04-12 1936
1.HashRouter：页面跳转原理是使用了location.hash、location.replace,并且路径中是包含/# 2.BrowerRouter：页面跳转原理是使用了pushState、replaceState,路径不包含#直接定位到/目录下 区别： A.从页面的地址栏中可以看出HashRouter是包含#号的，而BrowerRouter是不包含#号的 B.BrowerRou...
BrowserRouter和HashRouter的区别
weixin_30414245的博客
01-19 6478
BrowserRouter： 　　原理是H5的history API，IE9及以下不兼容，需要由web server支持，在web client这边window.location.pathname被react router解析，example.com/react/route HashRouter： 　　原理是URL的hash，不需要由web server支持，因为它的只有‘/’path需要由...
react.js的两种路由方式：HashRouter
08-08 3万+
react.js路由-初步前面我们已经了解了react.js其中一种路由方式。这种方式是利用 html5的`window.history`，对浏览器历史记录的读取。 `history.back()` 和在浏览器点击后退按钮相同； `history.forward()`和在浏览器中点击前进按钮相同。另外h5时段开始支持`pushState()`和`replaceState()`方法，并且当回退/前进是
深入了解React（十八、路由4-BrowserRouter ）
yuzhiboyouzhu的博客
04-21 811
1、安装：yarn add react-router-dom@4.2.2 2、引入：import { BrowserRouter as Router, Route } from ‘react-router-dom’;import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter as Route
React-Router-DOM：实现嵌套路由详解
"在本文中，我们将深入探讨如何在React应用中使用`react-router-dom`实现嵌套路由。首先，我们从入口文件`index.js`开始，这是一个典型的React应用启动点，导入了必要的React库、ReactDOM、主组件`App`以及Babel-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值