react router4 需要配置2遍BrowserRouter

最新推荐文章于 2023-06-29 15:53:55 发布
转载 最新推荐文章于 2023-06-29 15:53:55 发布 · 252 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5b7beaba518825430f2ffafb
文章标签：

#java #javascript #ViewUI

本文记录了一次解决this.prop.history.push('/')无法实现页面跳转的问题经历。作者在app.jsx文件中加入BrowserRouter后解决了该问题，尽管index文件中已配置BrowserRouter但未生效。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前因：

this.prop.history.push('/')不跳转


找了许久，发现官网都是在app.jsx文件里面加的BrowserRouter，就加了一个，果然好了，原因不明。


很奇怪的是index文件里面也已经配置了BrowserRouter，居然不管用！

、

就此记录下，遇到过类似问题的也可以交流下。


转载于:https://juejin.im/post/5b7beaba518825430f2ffafb

第4章、React-Router路由配置；
weixin_44121341的博客
04-12 800
React-Router路由配置
React BrowserRouter路由配置，不需要#号
JiaEnYa的博客
06-19 4225
React BrowserRouter路由配置，不需要#号 介绍一下我的项目使用的路由，O(∩_∩)O~ 路由文件：router.js import React from 'react' import { BrowserRouter as Router, Route } from 'react-router-dom'; import login from './login/login'; e...
详解react-router 4.0 下服务器如何配合BrowserRouter
08-28
主要介绍了详解react-router 4.0 下服务器如何配合BrowserRouter，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
REACT_react路由配置
小歪博客
06-29 392
BrowserRouter：history路由 HashRouter：hash路由 Router：的history是必需的props Switch：表示只渲染第一个与当前地址匹配的 Route 渲染组件的方式 Route的props path为路径，component为路径对应的页面 Route 是 React Router中用于配置路由信息的组件，每当有一个组件需要根据 URL 决定是否渲染时，就需要创建一个 Route component 的值是一个组件，当 URL 和 Route 匹配时，Comp.
React 路由配置
We_990528的博客
06-29 4667
3, 创建路由文件src/router/index.js, 导入需要路由跳转的组件, 并导出路由配置数组。2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。2, 创建路由文件src/router/index.jsx, 导入根组件和需要路由跳转的组件。
nginx中配置react-router参数跳转
weixin_34358092的博客
06-13 594
2019独角兽企业重金招聘Python工程师标准>>> ...
React 路由 踩坑 编程式路由失效
胡乱选一个
05-28 1993
React 路由 踩坑 编程式路由失效 遇到的问题 当在路由组件里面使用函数式编程 路由时会无法跳转 但浏览器地址已经更改。 问题原因 书写了多个<BrowserRouter></BrowserRouter>标签导致 问题详细描述 首先我在App组件里面已经书写了<BrowserRouter></BrowserRouter>标签，然后我跳转到Message组件，在Message组件再次跳转时又写了一层<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 v4 路由配置方法小结
08-29
本文将深入探讨React Router v4中的路由配置方法。 首先，我们需要理解`Route`、`Router`和`Switch`这三种关键组件的区别： 1. **Route**: `Route`组件是直接与`location`和用户界面（UI）交互的核心部分。它负责...
BrowserRoute服务器配置
weixin_30487701的博客
12-17 2823
BrowserRoute服务器配置 在React项目中我们经常需要采用React-Router来配置我们的页面路由，React-Router 是建立在 history 之上的，常见的history路由方案有三种形式，分别是： 1）hashHistory 2）browserHistory 3）createMemoryHistory hashHistory使用 URL 中的 hash（#）...
react-router 4.0 下服务器如何配合BrowserRouter
ayu51314的博客
05-15 552
　　react-router作为react框架路由解决方案在react项目中举足轻重。 　　在react-router 4.0版本中，API与先前版本相比有了很大的修改，在2.0、3.0中常用的<Router>组件作为路由底层配置组件不再常用，取而代之的是四个各有不同的路由组件： <BrowserRouter>,<HashRouter>,&lt...
react-router HashRouter和BrowserRouter的使用
热门推荐
落草为寇的海带王
07-27 2万+
官网推荐的是BrowserRouter，但是此方式需要服务器配合，而且有点不好的是重定向只能到首页，无法停留在当前页，具体用法很简单，举例说明。 示例网站（使用HashRouter） HashRouter//react-router要求只只有一个字节点 //router内部的Link和Route会一一匹配，匹配到则加载对应的组件 //to 和 Route 的path是一样的（除了/结尾） //
react-router之BrowserRouter用法
weixin_30323631的博客
09-22 2651
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 browserhistory 关于 Nginx配置
weixin_34289454的博客
08-09 857
react-router + redux 做的项目，当然路由用的是browserHistory 服务器端nginx配置如下 location / { try_files $uri /index.html; } try_files 语法: try_files file1 [file2 … filen] fall...
React-router 配置browserHistory
a281081864的博客
05-04 743
browserHistory是使用React Router的应用推荐的history，它使用浏览器重的History API用于处理URl 可以通过设置webpack.config.js 中的devServer，设置如下 devServer: { historyApiFallback:{ index:'src/inde...
webpack 配置 react-router BrowserRouter
qq_39261142的博客
05-21 1674
如果使用 react-router-dom 来配置路由跳转，默认情况下只能使用 HashRouter，使用 BrowserRouter 时匹配 / 以外的路由会找不到服务而报 404 错误 这是因为 react 服务是一个单页面应用，使用 BrowserRouter 模式会向浏览器请求指定的路由资源，如访问 xxx 路由相当于请求服务端的 ~/xxx 资源，但是服务端并没有配置该路由，因此会返回 404， webpack 中的解决思路是：如果匹配不到对应路由，都返回 index.html，然后通过 js 代
react-BrowserRouter-nginx-二级目录配置
mollerlala的博客
07-18 6558
我的域名假设是http://www.abc.cn，二级目录是wsp； 前端两步： 第一步：package.json下加homepage字段： 正确写法："homepage": "http://www.abc.cn/wsp/", 注意：这里一定要是绝对路径，我网上找了好多都是 方案1："homepage": "." 方案2："homepage": "./" ...
react单页应用使用了Router 路由，部署在Apache服务器，刷新报错 404 解决
hell87的博客
05-21 1804
一、问题描述 react单页应用使用了BrowserRouter 路由（HTML5 history API ），项目打包后，使用apache服务器访问http://www.ceshi.com/userinfo，能够正常显示，但是刷新后页面404了 二、问题原因 刷新页面时访问的资源在服务端找不到，因为react-router设置的路径不是真实存在的路径。 如上的404现象，是因为在apach...
SAAS云平台搭建札记: (四) AntD For React使用react-router-dom路由接收不同参数页面不刷新的问题
nidongla的博客
04-27 293
在.net开发员眼里，如果使用MVC，根据路由匹配原则，可以通过各种方式接收参数，比如 /Post/List/1, /Post/List/2，或者 /Post/List?id=1，/Post/List?id=2，后端PostController中的List Action都能接收到id为1或者2的参数，进行相应操作；但是，我们使用Ant Design For React的时候，如果使用react-router-dom作为路由，不管使用哪种参数，点击不同参数页面链接的时候，地址栏里页面参数是变了，但是...
React Router v4 指南：全新设计与实战总结
React Router v4 分为了多个子模块，包括react-router核心库、react-router-dom用于DOM绑定、react-router-native针对React Native、react-router-redux整合Redux以及react-router-config辅助静态路由配置。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值