[英]Browser back button can not navigate in React Router v4
我的問題與標題中的一樣。 我正在使用react v16
和react-router v4
我導航到幾頁后我點擊瀏覽器后退按鈕。 它需要我上次訪問的頁面而不是我導航的最后一條路線。 在我之前的反應項目中( react v15
, react-router v3
)它運行得很好。 這是我的源代碼,請告訴我我的錯誤。 謝謝。
index.js
import { HashRouter as Router } from 'react-router-dom';
import routes from 'routes/index';
render(
<Provider store={store}>
<div>
<Router children={routes}/>
<ReduxToastr
timeOut={2000}
newestOnTop={false}
preventDuplicates={false}
position="top-right"
transitionIn="fadeIn"
transitionOut="fadeOut"
progressBar={false}
showCloseButton={true}/>
</div>
</Provider>, window.document.getElementById('app'));
routes.js
export default (
<Switch>
<Route path="/login" component={Login} exact/>
<Route path="/logout" component={Logout} exact/>
<PrivateRoute path="/" component={Home} exact/>
<PrivateRoute path="/home" component={Home}/>
<PrivateRoute path="/apikeylist" component={ApiKeyList}/>
<PrivateRoute path="/apikey/new" component={ApiKeyAddUpdate}/>
<PrivateRoute path="/apikey/edit/:apiKey" component={ApiKeyAddUpdate}/>
<PrivateRoute path="/etf/promoter" component={EtfPromoter}/>
<PrivateRoute path="/etf/umbrella" component={EtfUmbrella}/>
<PrivateRoute path="/etf/fund" component={EtfFund}/>
<PrivateRoute path="/etf/shareclass" component={EtfShareclass}/>
<PrivateRoute path="/index/indexvariant" component={IndexVariant}/>
</Switch>
);
PrivateRoute.js
import React from 'react';
import PropTypes from 'prop-types';
import { Route } from 'react-router';
import App from 'layout/pages/App';
import { connect } from 'react-redux';
import Login from 'layout/pages/login';
import { withRouter } from 'react-router-dom';
class PrivateRoute extends React.Component {
constructor(props) {
super(props);
}
render() {
const { authenticated, component: Component, ...rest } = this.props;
return (
<Route {...rest} render={props => (
authenticated ? (
<App>
<Component {...props}/>
</App>
) : (
<Login/>
)
)}/>
);
}
}
PrivateRoute.propTypes = {
authenticated: PropTypes.bool,
component: PropTypes.any
};
const mapStateToProps = state => {
return {
authenticated: state.auth.authenticated
};
};
export default withRouter(connect(mapStateToProps)(PrivateRoute));
從<NavLink/>
及其作品中刪除了替換道具。 replace屬性用當前路由替換您的路由。 所以它永遠不會保持整個歷史只有一個路由瀏覽器可以記住。 解決了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.