creact-react-app+react-route-dom路由跳转页面不渲染,或者不变化
react-app+react-router-dom路由跳转页面不渲染,或者不变化
路由配置:
import React from 'react' import {Router, Route, Switch} from 'react-router-dom' //BrowserRouter as import { createBrowserHistory } from 'history' import Login from './login';//普通加载模块 import Main from './main'; const history = createBrowserHistory(); class RouteMap extends React.Component { render () { return ( <Router history={ history }> <Switch > <Route path="/" exact component={Login}/> <Route path="/login" component={Login}/> <Route path="/main" component={Main}/> {/*<Redirect from="/*" to="/404"/>*/} </Switch> </Router> ) } } export default RouteMap //_this.props.history.push('/main')//跳转可后退 //_this.props.history.replace('/main')//跳转不可后退 // <Redirect from="/*" to="/" /> //重定向 // <Route path="*" component={NotFound404}/>//默认
重点来了~!!!!!!!!!!!
可以看到代码上面有一个注解 BrowserRouter as,网上有很多人说加上它,但是我觉得没有解决根本问题
当路由加上 BrowserRouter as Router 的时候可以跳转,但是页面会报错,提示你
tiny-warning.esm.js:11 Warning: <BrowserRouter> ignores the history prop. To use a custom history, use `import { Router }` instead of `import { BrowserRouter as Router }`.
身为强迫症患者 怎么能容忍这个警告!!经过我仔细对比 终于发现问题所在, history
history
history
history
创建项目的时候我是直接安装 npm i history npm i react-router-dom 从而忽略版本这个问题,造成页面不出来
然后就出现上面的错误,经过我筛选才发现这个问题所在,特此谨记,然后我安装
npm i history@4.1.0 解决!!!!!!
网上查找原因:
众所周知 react-router-dom 是基于 react router 的 ,而它的版本还没有更新到。汗啊!!
转载标明来路-博客园,
联系方式1763907618@qq.com
标签:
react
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异