Как перенаправить на дом в реагирующем роутере dom после входа в систему с помощью redux? - PullRequest
0 голосов
/ 11 марта 2019

Я написал редуктор и действие для аутентификации в редуксе, и проверил, вошел ли пользователь в систему с помощью:

const mapStateToProps = state => {
    return {
        isLoggedIn: state.auth.token !== null,
    }
}

это работает, и я могу проверить аутентификацию пользователя с помощью:

if (this.props.isLoggedIn) {
    console.log('logged in');
}

После входа в систему получите logged in в консоли браузера. Как я могу перенаправить на /?

Я стараюсь так:

if (this.props.isLoggedIn) {
    this.props.history.push('/');
}

URL браузера изменен, но содержимое страницы не меняется.

Обновление: Мои маршруты App.js:

  <div className="App">
    <Switch>
      <Route path="/login" exact component={Login} />
      <Route path="/" component={Template} />
    </Switch>
  </div>

Обновление2: мой шаблон:

import React, { Component } from 'react';
class Template extends Component {
    render() {
           return (
            <h1>Template</h1>
        )
    }
}
export default Template;

Ответы [ 3 ]

0 голосов
/ 11 марта 2019
<Route exact path="/" component={Template} />

Подробнее о Точный

имеет тенденцию ставить ваш корневой маршрут первым внутри <Switch>, а для последнего вы можете иметь маршрут, который будет отображаться в 404 случаях.

из одного из моих проектов

<BrowserRouter>
    <Switch>
      <Route exact path='/' component={Home} />
      <Route path='/auth' component={Auth} />
      <Route path='/dashboard' component={Dahsboard} />
      <Route component={Route404} />
    </Switch>
</BrowserRouter>
0 голосов
/ 11 марта 2019

сделайте свои маршруты такими

<Switch>
      <Route exact path="/login" exact component={Login} />
      <Route path="/" component={Template} />
</Switch>

и затем в методе визуализации Login компонента

this.props.isLoggedIn ? <Redirect to='/'/> : <div> { /* Login component stuff goes here */ } </div> 
0 голосов
/ 11 марта 2019

В методе рендеринга

if (this.props.isLoggedIn) {
   return <Redirect to='/'/>;
}

Полагаю, вам нужно импортировать следующее.

import { Redirect } from 'react-router-dom'

Это то, что вы ищете?

...