父组件ReactJS中的函数重定向答案

【问题标题】：Redirect in function in parent component ReactJS父组件ReactJS中的函数重定向
【发布时间】：2020-08-13 04:17:28
【问题描述】：

我正在制作一个登录页面。在 componentDidMount() 上，它检查 cookie 并将状态变量“redirect”设置为 true，如果有，反之亦然。在我的 App render() 中，如果“redirect”为真，我可以重定向到登录组件。但是，在我登录或设置 cookie 后，我无法重定向到我的仪表板/登录页面。

我只有两个组件，Dashboard 和 Login，Dashboard 不操纵任何状态，除了 Login，它在父组件 App 中设置状态“重定向”。以下是我的代码：

App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import {BrowserRouter,Route,Switch,Redirect} from 'react-router-dom';
import Dashboard from './components/Dashboard';
import Login from './components/Login';
import Cookie from 'js-cookie';
import Nav from './components/Nav';
import Error from './components/Error';

class App extends Component{
  state={
    redirect:false
  }
  componentDidMount(){
    if(Cookie.get("api")!=null){
      console.log("There exists a cookie");
      this.setState({
        redirect:false
      });
    }else{
      console.log("There is no cookie");
      this.setState({
        redirect:true
      });
    }
  }


  setCookie=()=>{
    Cookie.set("api","Cookie");
    console.log(Cookie.get("api"));
    this.setState({
      redirect:false
    });
    return <Redirect to="/"/>
  }

  render(){
    return (
      <BrowserRouter>
        <div className="container">
            <div className="row">
              <div className="col-12 text-left mt-5">
                <Nav/>
                <Switch>
                  <Route exact path="/" render={()=>(
                    this.state.redirect?<Redirect to="/login"/>:<Dashboard/>
                  )}/>
                  <Route path="/login" render={()=>(
                    <Login setCookie={this.setCookie}/>
                  )}/>
                  <Route component={Error}/>
                </Switch>

              </div>
            </div>
          </div>
      </BrowserRouter>


    );
  }
}

class Login extends Component {
  onClick=()=>{
    this.props.setCookie();
  }
  render() {
    return (
      <div>
        <h1>Login page!</h1>
        <Button onClick={this.props.setCookie}>Set Cookie to Log In</Button>
      </div>

    );
  }
}

正确的，在登录中按下设置cookie按钮后，它应该重定向到仪表板组件。

知道我该怎么做吗？感谢您的阅读。

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

更新路由以将route-props 传递给Login

<Route
  path="/login"
  render={routeProps => <Login {...routeProps} setCookie={this.setCookie}/>}
/>

现在在Login 中，您将可以访问history 属性。 history.replace 相当于 REDIRECT。

class Login extends Component {
  onClick=()=>{
    this.props.setCookie();
    this.props.history.replace('/');
  }

  render() {
    return (
      <div>
        <h1>Login page!</h1>
        <Button onClick={this.onClick}>Set Cookie to Log In</Button>
      </div>

    );
  }
}

另外，从 setCookie 中删除 return <Redirect to="/"/>，因为它永远不会被渲染到 DOM 中。

【讨论】：

【解决方案2】：

<Button onClick=(() => {this.props.setCookie})>Set Cookie to Log In</Button>

【讨论】：