zoukankan      html  css  js  c++  java
  • 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 的 ,而它的版本还没有更新到。汗啊!!

  • 相关阅读:
    性能测试之Jmeter学习(八)
    性能测试之Jmeter学习(四)
    性能测试之Jmeter学习(三)
    性能测试之Jmeter学习(二)
    性能测试之Jmeter学习(一)
    性能测试基础知识
    爬虫库之BeautifulSoup学习(五)
    Shell编码风格
    JDBC连接Hive数据库
    IDEA unable to find valid certification path to requested target
  • 原文地址:https://www.cnblogs.com/wangyongping/p/13652524.html
Copyright © 2011-2022 走看看