进入React Web应用程序的外部URL未推送到历史记录中

Question

我有一个React Web应用程序。我在密码重置电子邮件中发送了json网络令牌。当用户单击button时，浏览器将打开一个带有令牌的URL。问题是，当打开URL时，它将重定向到浏览器历史记录中打开的最后一个URL。我希望，即使在浏览器上手动点击了该网址，应用程序也应该能够响应该网址，并将用户带到应用程序中的特定路由。 我的react应用使用history和create browser history作为中间件。 我的应用代码如下：

import React from 'react';
import {ConnectedRouter} from 'connected-react-router'
import {Provider} from 'react-redux';
import {Route, Switch} from 'react-router-dom';

import configureStore, {history} from './store';
import App from './containers/App';
import ResetPassword from './containers/resetPassword';

export const store = configureStore();

const MainApp = () =>
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route path="/" component={App}/>
      </Switch>
    </ConnectedRouter>
  </Provider>;


export default MainApp;

import React, {Component} from 'react';
import {createMuiTheme, MuiThemeProvider} from '@material-ui/core/styles';
import MomentUtils from '@date-io/moment';
import {MuiPickersUtilsProvider} from 'material-ui-pickers';
import {Redirect, Route, Switch} from 'react-router-dom';
import {connect} from 'react-redux';
import MainApp from 'app/index';
import SignIn from './SignIn';
import SignUp from './SignUp';
import ForgotPassword from './forgotPassword';
import ResetPassword from './resetPassword';
import {setInitUrl} from '../actions/Auth';
import RTL from 'util/RTL';
import { isValidToken } from '../util/helpers'

const RestrictedRoute = ({component: Component, authUser, ...rest}) =>
  <Route
    {...rest}
    render={props =>
      authUser
        ? <Component {...props} />
        : <Redirect
          to={{
            pathname: '/signin',
            state: {from: props.location}
          }}
        />}
  />;

class App extends Component {

  async componentWillMount() {
    if (this.props.initURL === '') {
      // Here the initial URL is what the url hits on the page
      // which would be /resetPassword
      this.props.setInitUrl(this.props.history.location.pathname);
    }
  }

  render() {
    const {match, location, locale, authUser, isDirectionRTL} = this.props;
    // I see that that the regardless of what the url is 
    // location.pathname is the previous one which was opened. 
    // Even after the pushing it, it does not work !
    console.log("RENDERING APP")
    console.log(location.pathname)
    console.log(this.props.history)

    if (location.pathname === '/') {
      if(isValidToken(authUser)) {
        return ( <Redirect to={'/app/home'}/> );
      } else {
        return ( <Redirect to={'/signin'}/> );
      }
    }
    const currentAppLocale = AppLocale[locale.locale];
    return (
      <MuiThemeProvider theme={applyTheme}>
        <MuiPickersUtilsProvider utils={MomentUtils}>
          <IntlProvider
            locale={currentAppLocale.locale}
            messages={currentAppLocale.messages}>
            <RTL>
              <div className="app-main">
                <Switch>
                  <RestrictedRoute path={`${match.url}app`} authUser={authUser} component={MainApp}/>
                  <Route path='/forgotPassword' component={ForgotPassword}/>
                  <Route path='/resetPassword' component={ResetPassword}/>
                  <Route path='/signin' component={SignIn}/>
                  <Route path='/signup' component={SignUp}/>
                </Switch>
              </div>
            </RTL>
          </IntlProvider>
        </MuiPickersUtilsProvider>
      </MuiThemeProvider>
    );
  }
}

const mapStateToProps = ({settings, auth}) => {
  const {sideNavColor, locale} = settings;
  const {authUser, initURL} = auth;
  return {sideNavColor, locale, authUser, initURL}
};

export default connect(mapStateToProps, {setInitUrl})(App);

import {applyMiddleware, compose, createStore} from 'redux';
import reducers from '../reducers/index';
import {createBrowserHistory} from 'history'
import {routerMiddleware} from 'connected-react-router';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import thunk from 'redux-thunk';

const persistConfig = {
  key: 'root',
  storage,
}

const history = createBrowserHistory();
const routeMiddleware = routerMiddleware(history);

const middlewares = [thunk, routeMiddleware];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default function configureStore(initialState) {
  const persistedReducer = persistReducer(persistConfig, reducers(history))
  const store = createStore(persistedReducer, initialState,
    composeEnhancers(applyMiddleware(...middlewares)));
  
  persistStore(store)

  return store;
}
export {history};

我什至尝试推送新的url，但没有推送或更改。除此之外，还有清除历史的方法吗？