具有自定义历史记录的 React Router 不起作用
2020-06-18
9227
当我使用 react-router-dom 中的 BrowserRouter 时,我的路由可以正常工作。但为了使用自定义历史记录,我将 BrowserRouter 替换为 react-router 中的 Router。之后,我的路由组件无法正确加载,但网址可以正确更改。 这是我的代码:
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 或 Link 后,它始终会打开 PageNotFound 组件。
3个回答
事实上,我刚刚发现了我的问题,也可能是你的。
我当时在
[email protected]
和
[email protected]
上。
react-router 5x 与 history 4x 兼容。一旦我降级到
[email protected]
,一切都开始正常工作。
beefaroni
2020-06-25
现在使用 useNavigate() 钩子代替 useHistory() 或任何与历史相关的内容。
您可以像这样使用;
import { useNavigate } from "react-router-dom";
let navigation = useNavigate();
navigate('/detail')
注意:编写以更新信息。
brkkali
2021-11-26
我使用了 history.goBack("/signup") 而不是 history.push("/signup") 似乎对我有用。
Sepiocop
2021-05-11