Внешний URL-адрес, приходящий в веб-приложение реагирования, не помещен в историю - PullRequest
0 голосов
/ 22 июня 2019

У меня есть веб-приложение реагировать. Я отправил веб-токен JSON в электронном письме для сброса пароля. Когда пользователь нажимает button, браузер открывает URL с токеном. Проблема в том, что при открытии URL-адреса он перенаправляется на последний URL-адрес, открытый браузером в истории. Я хочу, чтобы, даже если URL-адрес был введен вручную в браузере, приложение должно иметь возможность отвечать на этот URL-адрес и выводить пользователя на этот конкретный маршрут в приложении. Мое приложение реакции использует 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, но он не выдвигается и не изменяется. В дополнение к этому, есть ли способ очистить историю?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...