Question

我正在使用React routing v4为具有登录和主页的应用程序完成一次哑式身份验证。到目前为止，我在index.js文件中有这个LoadComponent.jsx：

    class LoadComponent extends Component {
  state = {
    isLoggedOn: false,
  };

  onLoginCheck = (name, password) => {
    console.log(name, password);
    if (name && password) {
      setTimeout(name, 100); // fake async
      console.log('set the timeout');
    }
    this.setState({
      isLoggedOn: true,
    });
  };


  checkAuth = () => {
    const { isLoggedOn } = this.state;
    console.log('checking auth: ', isLoggedOn);
    return (isLoggedOn);
  };

  render() {
    return (
      <BrowserRouter >
        <Switch>
          <Header isLogged={this.checkAuth()} />
          <Route path="/login" render={props => <Login isLoggedOn={this.state.isLoggedOn} onLoggedInCheck={this.onLoginCheck} {...props} />} />
          <PrivateRoute path="/" component={App} authenticated={this.state.isLoggedOn} />
        </Switch>
      </BrowserRouter>
    );
  }
}

我的privateRouter如下所示：

const PrivateRoute = ({
  component, exact = false, path, authenticated,
}) => {
  console.log('here : ', authenticated);
  return (
    <Route
      exact={exact}
      path={path}
      render={props => (
        authenticated ? (
          React.createElement(component, props)
        ) : (
          <Redirect to={{
            pathname: '/login',
            state: { from: props.location },
          }}
          />
        )
      )}
    />
  );
};

export default PrivateRoute;

在页面上呈现的唯一内容是Header组件，它是有意义的，但是PrivateRoute组件不起作用，因为首先应该显示Login组件。我不确定我在这里做错了，因为我在某种程度上遵循了反应路由器Redirect Auth示例。

React Routing不呈现

0 个答案: