Как сделать в react-router при успехе редирект на другую страницу?

Question

[hollanditkzn]

У меня код https://codepen.io/rusline/pen/RxvROZ?editors=0010 который при успешной авторизации должен рендерится, но не пойму как это сделать в react
В index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import Helmet from './aplication';
import Auth from './component/AuthForm';


ReactDOM.render(
    <Helmet title='Авторизация'/>,
    <BrowserRouter>
        <Switch>
            <Route path='/' component={Auth} />
            <Route path='/index' render={() => <div>Home</div>} />
        </Switch>
    </BrowserRouter>,
    document.getElementById('content')
);

Answer 1

[0X12eb]

Рендер при успешной авторизации:

try {
  const { result } = await loginRequest(model));
	dispatch({ type: types.LOGGED_IN });
	dispatch(push('/index'));
} catch ({ errors }) {
	dispatch({ type: types.LOGIN_FAILED, errors });
}

Не забудьте редирект на роут навесить (при попытке входа юзера без токена)

Comments

[Антон Спирин]

Тут как минимум надо использовать redux, react-redux, react-router-redux и, видимо, redux-thunk.
Автор же использует голый react. Хотя, конечно, лучше ему поскорей начать использовать redux.

Если автор использует react-router 4, то использовать react-router-redux не рекомендуется, так как пятая версия поддерживающая react-router 4, все еще находится на стадии бета тестирования и не рекомендована для использования в продакшене.