簡體   English   中英

瀏覽器后退按鈕無法在React Router v4中導航

[英]Browser back button can not navigate in React Router v4

我的問題與標題中的一樣。 我正在使用react v16react-router v4我導航到幾頁后我點擊瀏覽器后退按鈕。 它需要我上次訪問的頁面而不是我導航的最后一條路線。 在我之前的反應項目中( react v15react-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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM