Question

我的问题与标题中的一样。我使用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));

Answer 1

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

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

1 个答案: