Перенаправление в функцию в родительском компоненте ReactJS

Question

Я делаю страницу входа. В componentDidMount () он проверяет готовность ie и устанавливает для переменной состояния «redirect» значение true, если оно есть, и наоборот. В моем приложении render () я могу перенаправить компонент входа в систему, если «redirect» имеет значение true. Однако после того, как я вошел в систему или настроил повара ie, я не могу перенаправить на свою панель мониторинга / целевую страницу.

У меня есть только два компонента, Dashboard и Login, Dashboard не манипулирует каким-либо состоянием, кроме Login, который устанавливает состояние «перенаправление» в родительском компоненте 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>


    );
  }
}

Вход в систему. js

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>

    );
  }
}

По праву, после нажатия на кнопку набора готовить ie кнопка «Войти», она должна перенаправить на компонент Dashboard.

Есть идеи, как мне это сделать? Спасибо за чтение.

Answer 1

Обновите маршрут, чтобы передать route-реквизиты в 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>

    );
  }
}

Кроме того, удалите return <Redirect to="/"/> из setCookie, поскольку он никогда не будет отображаться в DOM.

Answer 2

Логин. js не должно иметь двух событий onClick, просто добавьте

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