react-router-dom中的BrowserRouter和HashRouter

最新推荐文章于 2024-05-11 15:50:53 发布
最新推荐文章于 2024-05-11 15:50:53 发布
阅读量1.3k 收藏 1
点赞数 2
分类专栏： React 前端 文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43853746/article/details/125374024
版权
前端 同时被 2 个专栏收录
78 篇文章 37 订阅
订阅专栏
React
4 篇文章 0 订阅
订阅专栏
服务器路由: browserRouter,前端路由: hashRouter
1、browserRouter

如果前端使用了browserRouter，每次改变路由时，会向服务器发送请求，因为服务器未配置对应的路径指向对应的文件，自然导致出现404的情况.(对于初始化页面,即路由为/时,不会发送请求)

因此在使用browserHistory需要再加一层服务器配置(node/Nginx),让前端发送的请求映射到对应的HTML文件上.

2、hashRouter

由于hashRouter会在路径上添加/#/，而/#/后面的所有都不会发送到服务器端，即对于服务器而言，路径依旧是localhost:3000，路由切换在前端完成。

但是官方会更推荐使用browserRouter，貌似是因为其构建于H5的History API，比起hashRouter，它多出了更多的方法操控url。

Ly_cat
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超超详细ReactRouter v6版本的基本使用
qq_45679015的博客
03-27 4257
先附上官网的地址：react-router-v6 · GitHub Topics · GitHub 一.概述 React Router 以三个不同的包发布到 npm 上，它们分别为： react-router: 路由的核心库，提供了很多的：组件、钩子。 react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如<BrowserRouter>等。 react-router-native: ..
# react 中使用路由 router 详解
大家好，我是 ed.
10-26 2307
路由就是一个映射关系（ key: value）。key 为路径， value 可能是 function 或者是 component。我们学习路由的时候会遇到两个经常用的单词router和route。区别是什么呢？router 是全局的路由器对象。route 是当前激活的路由对象。打个比方哈，我们自己家里上网需要路由器吧，router 就相当于家里的 路由器。route 就相当于路由器上面的网线插口或者是那个天线，不能没有 router 就是用 route。明确好界面中的导航部分、展示部分都是哪里。
React 路由 react-router-dom
qq_56303170的博客
05-24 1985
React 路由 react-router-dom 一个路由就是一个映射关系（key:value) key为路径，value是component 路由的实现是基于history 文章目录React 路由 react-router-domBrowserRouter和HashRouterLink 普通导航组件NavLink 导航高亮组件高亮跳转Navigate 重定向组键Routes和Route路由表嵌套路由路由的params参数路由的search参数路由的state参数编程式路由导航useNavigate
React Router DOM BrowserRouter
weixin_51687565的博客
05-11 232
React Router DOM BrowserRouter
react——路由
m0_55173487的博客
02-03 5625
前端路由就是把不同路由对应不同的内容或页面对应展示出来。路由可以帮助我们很好的管理页面和代码，增强用户的体验感。路由模式有hash和 history 两种模式，通常用hash模式。在react中，react-router是跨平台的，内置通用组件和通用Hooks。
react-router-dom中的BrowserRouter与HashRouter、link与Navlink区别
who_become_gods的博客
09-04 438
HashRouter包裹下访问根服务 假设为localhost:3000/ import { HashRouter as Router, Route, Redirect } from 'react-router-dom'; // as的作用为将HashRouter重命名为Router,这样的好处是在反复测试HashRouter和BrowserRouter时,可以免去组件修改 import Home from './pages/Home/index'; import Hooks from './page
ipfs-react-router：为IPFS部署的网站提供更好的React Router路由
02-02
IPFS React路由器 使用React Router时为IPFS网站提供更好的路由 中BrowserRouter或HashRouter的替代方法，它BrowserRouter通过为网站提供服务的方式来...import { Route , Switch } from 'react-router-dom' import I
前端大厂最新面试题-React Router.docx
06-06
BrowserRouter和HashRouter是react-router-dom中两个非常重要的组件。这两个组件都是路由组件，用于监听路径的变化。但是，它们之间有所不同。BrowserRouter是history模式，而HashRouter是hash模式。BrowserRouter...
React Router v4 入坑指南(小结)
08-27
2. `react-router-dom`: 为DOM环境（浏览器）提供的绑定，包含了如`BrowserRouter`、`HashRouter`等组件。 3. `react-router-native`: 专门为React Native应用设计的绑定。 4. `react-router-redux`: 整合React ...
前端大厂最新面试题-React Router model.docx
06-06
使用React Router对应的hash模式和history模式对应的组件为HashRouter和BrowserRouter。HashRouter和BrowserRouter都是顶层组件，负责管理路由的跳转。 Router的实现原理是路由描述了URL与UI之间的映射关系，这种...
React学习项目-基于JavaScript的人事后台管理系统源码+运行说明.zip
最新发布
06-20
import { Switch, Route, Router, HashRouter, Link } from 'react-router-dom'; class App extends React.Component { render() { return ( <HashRouter> </HashRouter> ) } } ``` 解释说明： 1. ...
react-4（路由、路由机制、BrowserRouter/HashRouter、api路由跳转）
weixin_45626517的博客
08-09 550
react组件库：ant-design，antV AntD Admin：基于react，ant-design，dva，Mock 企业级后台管理系统最佳实践 github地址：https://gitee.com/mirrors/AntD-Admin 演示地址：https://antd-admin.zuiidea.com (用户名和密码都是guest） 一、路由 hash路由：（推荐） localhost:3000/#/student (--后面有#号的) 浏览器路由： l...
3. react-router-dom源码揭秘 - BrowserRouter
weixin_33910434的博客
11-09 517
今天开始，我们开始揭开react-router-dom神秘的头盖骨，哦不，面纱。 在此之前，我们需要了解一些预备知识：React的context和react-router-dom的基本使用。需要复习的同学请移步： 第一篇 Context - React跨组件访问数据的利器 第二篇 React-Router的基本使用 下面是我跟小S同学一起阅读源码的过程。 大家可以参照这个思路，进行其他开源项目...
react.js的两种路由方式：HashRouter
热门推荐
08-08 3万+
react.js路由-初步前面我们已经了解了react.js其中一种路由方式。这种方式是利用 html5的`window.history`，对浏览器历史记录的读取。 `history.back()` 和在浏览器点击后退按钮相同； `history.forward()`和在浏览器中点击前进按钮相同。另外h5时段开始支持`pushState()`和`replaceState()`方法，并且当回退/前进是
react-router HashRouter和BrowserRouter的使用
落草为寇的海带王
07-27 2万+
官网推荐的是BrowserRouter，但是此方式需要服务器配合，而且有点不好的是重定向只能到首页，无法停留在当前页，具体用法很简单，举例说明。 示例网站（使用HashRouter） HashRouter//react-router要求只只有一个字节点 //router内部的Link和Route会一一匹配，匹配到则加载对应的组件 //to 和 Route 的path是一样的（除了/结尾） //
react-router-dom中的BrowserRouter和HashRouter和link与Navlink
weixin_30496431的博客
09-23 820
HashRouter包裹下访问根服务: 假设为localhost:3000/ import { HashRouter as Router, Route, Redirect } from 'react-router-dom'; // as的作用为将HashRouter重命名为Router,这样的好处是在反复测试HashRouter和BrowserRouter时,可以免去组件修改...
BrowserRouter和HashRouter的区别
小多的博客
12-28 178
底层原理不一样： BrowserRouter 使用的是 H5 的 history API，不兼容IE9及以下的版本 HashRouter 使用的是 URL 的哈希值 path 表现形式不一样： BrowserRouter 的路径中没有#，例如：localhost:3000/demo/test HashRouter 的路径中包含#，例如：localhost:3000/#/demo/test 刷新后对路由state参数的影响： BrowserRouter 没有任何影响，因为 sta..
“Input”表示值，但在此处用作类型。是否指“类型 Input”?ts(2749)
WJLcomeon的博客
10-13 2552
“Input”表示值，但在此处用作类型。是否指“类型 Input”?ts(2749)
React-router( 路由 HashRouter 和 BrowserRouter 模式)
lllllllwj的博客
05-14 5612
react-router 我们使用的是4.+版本，使用的是react-router-dom react-router是3.x的版本 路由的模式有两种 老浏览器提供的 hash模式， 我们称之为： HashRouter H5提供的的 history 模式，我们称之为 BrowserRouter 注意： H5模式的路由需要后端支持 使用路由 在index.js中使用路由模式将组...
react-router-dom和router区别
06-07
React Router 是 React 应用程序中的路由库，它允许你在不刷新页面的情况下动态地渲染组件。 React Router 库包含了多个组件，其中包括 Router、Route、Switch 和 Redirect 等。 而 react-router-dom 是基于 React Router 的 Web 版本，它提供了一些额外的组件，比如 Link 和 NavLink，用于在应用中进行导航。 react-router-dom 还提供了一些针对 Web 平台的特性，比如 BrowserRouter 和 HashRouter 等。 因此，React Router 是 React 应用程序中的路由库，而 react-router-dom 则是基于 React Router 的 Web 版本，提供了一些额外的组件和 Web 平台特性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值