creact-react-app+react-route-dom路由跳转页面不渲染，或者不变化

实现發表於 2020-9-11 16:39:00

creact-react-app+react-route-dom路由跳转页面不渲染，或者不变化

<h1 style="text-align: center">react-app+react-router-dom路由跳转页面不渲染，或者不变化</h1>
<h2>路由配置：</h2>
<div class="cnblogs_code">
<pre>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')//跳转不可后退
// <Redirectfrom="/*" to="/" /> //重定向
// <Route path="*" component={NotFound404}/>//默认</pre>
</div>
重点来了~！！！！！！！！！！！
可以看到代码上面有一个注解 BrowserRouter as，网上有很多人说加上它，但是我觉得没有解决根本问题
当路由加上 BrowserRouter as Router  的时候可以跳转，但是页面会报错，提示你
<div class="cnblogs_code">
<pre>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 }`.</pre>
</div>
 
身为强迫症患者怎么能容忍这个警告！！经过我仔细对比终于发现问题所在， <code>history <code>history <code>history  </code><code>history</code></code></code>
创建项目的时候我是直接安装 npm i history  npm i react-router-dom 从而忽略版本这个问题，造成页面不出来
<code>然后就出现上面的错误，经过我筛选才发现这个问题所在，特此谨记，然后我安装 </code><code> npm i history@4.1.0  解决！！！！！！</code>
网上查找原因：
 
<img src="https://img2020.cnblogs.com/blog/1506521/202009/1506521-20200911163244585-439786497.png" alt="" loading="lazy">
 
众所周知  react-router-dom 是基于 react router 的，而它的版本还没有更新到。汗啊！！
 

</div>
<div id="MySignature" role="contentinfo">
转载标明来路-博客园，
联系方式1763907618@qq.com 
来源：https://www.cnblogs.com/wangyongping/p/13652524.html

頁: [1]

琼殿技术论坛's Archiver

creact-react-app+react-route-dom路由跳转页面不渲染，或者不变化