具有自定义历史记录的反应路由器不起作用答案

【问题标题】：React Router with custom history not working具有自定义历史记录的反应路由器不起作用
【发布时间】：2020-10-08 11:48:09
【问题描述】：

当我从 react-router-dom 使用 BrowserRouter 时，我的路由正在工作。但是为了使用自定义历史，我用 react-router 中的 Router 替换了 BrowserRouter。之后，我的 Route 组件未正确加载，但 url 正在正确更改。这是我的代码：

AppRouter-JS:----

import React from 'react';
import { Router, Route, Switch} from 'react-router';
// import { BrowserRouter as Router,Route, Switch} from 'react-router-dom';
import {createBrowserHistory} from 'history'

import Header from '../components/Header.js';
import Dashboard from '../components/DashboardPage.js'
import CreateExpense from '../components/CreateExpensePage.js';
import EditExpense from '../components/EditExpensePage.js';
import Help from '../components/HelpPage.js';
import PageNotFound from '../components/PageNotFound.js'
import LoginPage from '../components/LoginPage.js'


export const history = createBrowserHistory();

  const AppRouter = ()=>(
    <Router history={history}>
    <div>
      <Header/>
      <Switch>
        <Route path='/' exact={true} component={LoginPage}/>
        <Route path='/dashboard' component={Dashboard}/>
        <Route path='/create' component={CreateExpense} />
        <Route path="/edit/:id" component={EditExpense}/>
        <Route path='/help' component={Help} />
        <Route component={PageNotFound}/>
      </Switch>
    </div>
  </Router>
  )
  export default AppRouter;

HeaderJS:-- (这里有 NavLinks)

import React from 'react';
import {NavLink, Link} from 'react-router-dom';
import {connect} from 'react-redux';

import {LogoutAction} from '../Redux/Actions/AuthActions.js'

export const Header = ({logoutAction})=>(
    <header>
      <h1>Expense Tracker</h1>
      <p><NavLink exact activeClassName='active-class' to='/'>Home Page</NavLink></p>
      <p><NavLink activeClassName='active-class' to='/create'>Add Expense</NavLink></p>
      <p><NavLink activeClassName='active-class' to='/help'>Help Page</NavLink></p>
      <button onClick={logoutAction}>Logout</button>
    </header>
);

const mapDispatchToProps = (dispatch)=> {
  return {
    logoutAction: ()=> dispatch(LogoutAction())
  }
}

  export default connect(undefined,mapDispatchToProps) (Header);

单击任何 NavLink 或链接后，它总是会打开 PageNotFound 组件。

【问题讨论】：

这里也一样。在 v5.2.0 上建立一个新项目。当我使用 BrowserRouter 时，一切都很好，但是 Router+ 传入了一个历史对象，并且只有初始页面加载正确切换。在随后的位置更改（例如单击链接）时，Switch 语句似乎与任何路线都不匹配。
你解决了这个问题吗？

标签： reactjs react-router create-react-app react-router-dom history

【解决方案1】：

现在使用 useNavigate() 钩子代替 useHistory() 或任何与历史相关的东西。

你可以这样使用；

import { useNavigate } from "react-router-dom";

let navigate = useNavigate();

navigate('/detail')

注意：写来更新信息。

【讨论】：

【解决方案2】：

我使用 history.goBack("/signup") 而不是 history.push("/signup") 似乎对我有用。

【讨论】：

【解决方案3】：

实际上我刚刚发现了我的问题，而且可能也是你的问题。

我在 react-router-dom@5.2.0 和 history@5.0.0。

react-router 5x 与 history 4x 兼容。一旦我降级到history@4.10.1，一切都开始工作了。

【讨论】：

谢谢各位。我想强调一下这个解决方案是多么简单，所以在此表示感谢
谢谢！我不明白为什么从 BrowserRouter 切换后它不起作用。
谢谢！我已经被困在这两天了，并意识到我正在运行 React Router 5x w/ History 5x。太蠢了。
首先，我讨厌现代软件开发。第二，谢谢！
因此，我很容易陷入彻底绝望的兔子洞。谢谢我的伙计。