在 React 中登录后以编程方式路由

Question

我是 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:true }) }

.....
render(){

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

也许有人可以给我提示，为什么用户停留在登录页面上。如果我手动更改浏览器中的 url，路由将按预期工作。谢谢，阿诺德

Answer 1

一般来说，您应该提升状态，以便在正确的位置触发重新渲染。在这个例子中，你可以看到不同地方触发状态的区别。

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'));

Here 是一个活生生的例子。

在 React 中登录后以编程方式路由

Programmatically routing after login in React

reactjs

redirect

router

programmatically