浏览器后退按钮无法在 React Router v4 中导航

Question

我的问题如题。我正在使用 react v16 和 react-router v4 之后我导航到几个页面，然后单击浏览器后退按钮。它将我带到上次访问的页面而不是我导航的最后一条路线。在我之前的 React 项目（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));

Answer 1

从 <NavLink/> 及其作品中删除了 replace 道具。 replace 属性将您的路线替换为当前路线。所以它永远不会保留整个历史记录，只有一个路由浏览器可以记住。已解决。

浏览器后退按钮无法在 React Router v4 中导航

Browser back button can not navigate in React Router v4

javascript

back-button

reactjs

react-router-v4