具有自定义历史记录的反应路由器不起作用
Posted
技术标签:
【中文标题】具有自定义历史记录的反应路由器不起作用【英文标题】: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 语句似乎与任何路线都不匹配。 你解决了这个问题吗? 【参考方案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。太蠢了。 首先,我讨厌现代软件开发。第二,谢谢! 因此,我很容易陷入彻底绝望的兔子洞。谢谢我的伙计。以上是关于具有自定义历史记录的反应路由器不起作用的主要内容,如果未能解决你的问题,请参考以下文章