[ReactJS][React-Router-V4] Redirects[auth]问题

Question

我正在建立一个新的React JS项目，我想在人们没有联系的时候重定向authPage上的人们。

我有一个这样的App容器：

class App extends Component {
  render() {
return (
  <div className={'app-wrapper'}>
    <Helmet
      titleTemplate="FFMKR"
      defaultTitle="React.js Boilerplate"
    >
      <meta name="description" content="A React.js Boilerplate application" />
    </Helmet>
    <Header />
    <div className={'container-fluid'}>
      <div className={'row'}>
        <SideBar />
        <main role="main" className={'col-md-9 ml-sm-auto col-lg-10 px-4'}>
          <Switch>
            <Route path="/login" component={Login} />
            <PrivateRoute exact path="/" component={HomePage} />
            <Route path="" component={NotFoundPage} />
          </Switch>
        </main>
      </div>
    </div>
  </div>
);
}
}

我的PrivateRoute是这样的：

  const PrivateRoute = (props) => {
  const { component: Component, isLogged, ...rest } = props;
  console.log('on est dans la route lol', isLogged, {...rest});

  return (
    <Route
  {...rest}
  render={propsRender =>
    isLogged ? (
      <Component {...propsRender} />
    ) : (
      <Redirect
        to={{
          pathname: "/login",
          state: { from: propsRender.location }
        }}
      />
    )
  }
/>
);
};


PrivateRoute.propTypes = {
  isLogged: PropTypes.bool,
};

export default PrivateRoute;

我的变量isLogged已经是false了。当我启动我的应用程序时，我打开url "/“，我在url"/login”上重定向，但我的登录组件没有显示：

https://image.noelshack.com/fichiers/2019/03/1/1547456719-capture-d-ecran-de-2019-01-14-10-04-38.png

当我在url "/login“上重新加载时，我的登录组件工作正常：

https://image.noelshack.com/fichiers/2019/03/1/1547456719-capture-d-ecran-de-2019-01-14-10-04-58.png

为什么我启动我的应用程序，我的登录组件没有出现？

Answer 1

问题是您必须返回Redirect组件，而不是呈现它。因此，您必须执行类似以下示例的操作

export class PrivateRoute extends Component {
  render() {
    const { isLogged } = this.props;

    if (!isLogged()) {
      return <Redirect to="/login" />;
    }

    return (
      <Route
        {...this.props}
        component={props => (
          <this.props.component
            {...props}
          />
        )}
      />
    );
  }
}

Answer 2

如果地址栏中的url更改为/login，则react-router正在按预期工作。您的登录组件可能有问题。尝试将Login组件替换为如下所示的简单内容，然后进行测试：

function Login() {
  return <h3>Test login page</h3>;
}

Answer 3

Ho，很抱歉我没有在我的屏幕上显示这些信息，但是url地址栏变成了/login，我已经返回了这个函数，但是我有同样的问题。

这不是第一次工作，但如果我在url /login上重新加载页面，这是工作，我有“测试登录页面”在屏幕上。

当isLogged ===为真并且正常工作时，我测试了PrivateRoute组件。我不明白为什么我的登录组件没有显示。