Question

我正在建立一个新的React JS项目，当人们之间没有连接时，我想在authPage上重定向人们。

我有一个这样的App容器：

Y     X1    X2
2.4   9      1
?     7      2
?     3      3
?     5      4
?     8      5
1.7   3      6

2.4   9      1
?     7      2
?     3      3
?     5      4
?     8      5
1.7   3      6

和我的PrivateRoute这样：

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

我的变量isLogged已经为false。当我启动我的应用程序时，我进入网址“ /”，然后重定向至网址“ / login”，但未显示我的登录组件：

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

当我在URL“ / login”上重新加载时，我的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

对不起，我没有在屏幕上显示此信息，但是url地址栏更改为/ login，我已经返回了此功能，但是我遇到了同样的问题。

第一次无法使用，但是如果我在url / login上重新加载页面，那行得通，并且屏幕上显示“测试登录页面”。

当isLogged === true时，我测试PrivateRoute组件，多数民众赞成在工作我不明白为什么我的登录组件没有显示。

[ReactJS] [React-Router-V4]重定向[auth]问题

3 个答案: