react-router4使用HashRouter情况下,路由变化了,但是不跳转,附带错误,是这么情况呢?

发布于 2022-09-06 09:54:43 字数 2117 浏览 11 评论 0

第一个报错:Warning: <HashRouter> ignores the history prop. To use a custom history, use import { Router } instead of import { HashRouter as Router }
第二个报错:Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

代码如下

import React, { Component } from 'react';
import { HashRouter as Router, Route, Link, Switch, HashHistory } from 'react-router-dom';
import PropTypes from 'prop-types';
import './app.css'
import Goods from './pages/goods/goods'
import Active from './pages/active/active'
import Detail from './pages/detail/detail'
import Home from './pages/home/home'
import createHistory from 'history/createHashHistory'
const history = createHistory()


class App extends Component {
  constructor () {
    super()
    this.state = {
    }
  }
  
  render() {
    return (
      <Router history={history}>
        <div className="container"> 
          <div className="siderBar">
            <ul>
              <li className="siderBar_btn"><Link to="/">首页</Link></li>
              <li className="siderBar_btn"><Link to="/goods">商品专区</Link></li>
              <li className="siderBar_btn"><Link to="/detail">商品详情</Link></li>
              <li className="siderBar_btn"><Link to="/active">活动</Link></li>
            </ul>
          </div>
          
          <div className="content">
            <h1 className="title">解码器1.0</h1> 
              <Route path="/" exact component={Home} />
              <Route path="/detail" exact component={Detail} />
              <Route path="/active" exact component={Active} />
              <Route path="/goods" exact component={Goods} />
            <div className="footer"><img src={require('./assets/logo.png')} /></div>
          </div>
        </div>
      </Router>
    )
  }

}

export default App;

感激不尽~搞了好久额,网上也没有具体的案例,有的也很模糊~~

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

怪我鬧 2022-09-13 09:54:43

可以用replace。 因为浏览器不会将同样的路径push到stack里

风吹雨成花 2022-09-13 09:54:43

import { Router } 代替 import { HashRouter as Router }试试

没有伤那来痛 2022-09-13 09:54:43

import { Router as HashRouter}我这是放入前面的你试试

紫瑟鸿黎 2022-09-13 09:54:43

BrowserRouter as Router 代替HashRouter as Router

路弥 2022-09-13 09:54:43

第二个报错,应该是你重复点击一个按钮导致路由并没有变化引起的。可以在link中使用replace。
https://segmentfault.com/q/10...

刘备忘录 2022-09-13 09:54:43

BrowserRouter as Router 代替HashRouter as Router,这个才是正解

烟酉 2022-09-13 09:54:43

link to='xxx' replace

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文