Программная маршрутизация после входа в React - PullRequest
Новая
       51

Программная маршрутизация после входа в React

0 голосов
/ 04 января 2019

Я новичок в React и пытался направить аутентифицированного пользователя на главную страницу. К сожалению, пользователь остается на странице входа, хотя он успешно вошел в систему. Вот соответствующий фрагмент main.js, который обрабатывает часть маршрутизации. 

render(){
const {user} = this.props
{console.log("Logged in user: " + JSON.stringify(this.props.user.email))}
{console.log("Logged in : " + JSON.stringify(this.props.user.loggedIn))}
const PrivateRoute = ({ component: Component, ...rest }) => (

  <Route {...rest} render={(props) => (
    this.props.user.loggedIn === true
      ? <Component {...props} />

      : <Redirect to={{
          pathname: '/login',

        }} />
  )} />
)  

<BrowserRouter>
<main>

  <Button icon='log out' floated='right' color='blue' onClick={()=>this.userLogout(user)}/>
  <Switch>

    <PrivateRoute exact path='/' component={withRouter(StudentsMain)}/>

    <Route exact path='/about' component={About}/>
    <Route exact path='/login' component={withRouter(Login)}/>
    <PrivateRoute exact path='/settings' component={withRouter(Settings)}/>
    <PrivateRoute exact path='/assessment/:id' component={Assessment}/>
  </Switch>
</main>
</BrowserRouter>

А вот и соответствующая часть компонента входа в систему ... 

onValidSubmit = (formData) => {
console.log("logging in")

this.props.logInUser(formData)
this.setState({loggedIn: true})
};

onFormInfo = () => { this.setState ({ ShowInfo: правда }) } 

.....
render(){

if (this.state.loggedIn === true) {
  console.log('Redirecting to Main Page')
  return <Redirect to='/' />
}

Возможно, кто-нибудь подскажет, почему пользователь остается на странице входа. Если я изменю URL в браузере вручную, маршрутизация будет работать как положено. Спасибо, Арнольд

1 Ответ

0 голосов
/ 04 января 2019

В общем, вы должны поднять состояние вверх, чтобы запустить рендеринг в нужном месте. В этом примере вы можете увидеть разницу между срабатыванием состояния в разных местах. 

import React, { Component } from 'react';
import { render } from 'react-dom';

class Child extends React.Component {
  state = {
    loggedIn: false,
  }

  toggle = () => {
    this.setState({ loggedIn: !this.state.loggedIn })
  }

  render() {
    return <p onClick={this.props.onClick || this.toggle}>I am {this.state.loggedIn ? 'in' : 'out'}</p>
  }
}

class App extends Component {
  state = {
    loggedIn: false,
  }

  toggle = () => {
    this.setState({ loggedIn: !this.state.loggedIn })
  }

  render() {
    return (
      <React.Fragment>
        <Child onClick={this.toggle} />
        <Child />
      </React.Fragment>
    );
  }
}

render(<App />, document.getElementById('root'));

Здесь - живой пример.

...