如何将反应路由器错误与私有路由一起添加

Question

我正在使用 react 和 react-router v4 进行路由。我已经创建了用于身份验证的 PrivateRoutes，并且由于我已经实现了它们，所以我无法使用错误路由来进行不匹配。

每次我打错页面时，错误路由都在工作，但问题是它每次都会为任何路由呈现。

我尝试创建常规，但我打开它的每个页面都先呈现，然后再呈现，我认为它应该是这样

const Error = () => {
  console.log('error showing');
  return (
    <div>
      <p>Error: Route doesn't exist</p>
    </div>
  );
};

const PrivateRoute = ({ component: Component, token, error, ...rest }) => (
  <Route
    {...rest}
    render={props => (
      token !== '' ? <Component {...props} /> : <Redirect to="/login" />
    )}
  />
);


  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/signup" component={Signup} />
          <Layout>
            <PrivateRoute path="/" component={Home} exact token={this.props.login.token} />
            <PrivateRoute path="/upload" component={Upload} exact token={this.props.login.token} />
            <PrivateRoute path="/certificates" component={Certs} exact token={this.props.login.token} />
            <Route component={Error} />
            <PrivateRoute path="/transactions" component={Tables} exact token={this.props.login.token} />
            <PrivateRoute path="/issue" component={Issue} token={this.props.login.token} />
            <Route component={Error}/>
          </Layout>
        </Switch>
      </BrowserRouter>
    );
  }
}

Answer 1

您遇到的问题是您在渲染路由时没有任何 Switch case 包装 PrivateRoutes。如果 /login 和 /signup 路由不匹配，Layout 组件将在外部 Switch 语句中呈现，因此它会自动呈现而不考虑哪个 PrivateRoute 匹配。因此，您需要将呈现为 children 的路由包装到 Switch 中的 Layout 组件，并且只有一个 Error 路由实例

处理 PrivateRoutes 的正确方法如下。

render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/signup" component={Signup} />
          <Layout>
           <Switch>
            <PrivateRoute path="/" component={Home} exact token={this.props.login.token} />
            <PrivateRoute path="/upload" component={Upload} exact token={this.props.login.token} />
            <PrivateRoute path="/certificates" component={Certs} exact token={this.props.login.token} />
            <PrivateRoute path="/transactions" component={Tables} exact token={this.props.login.token} />
            <PrivateRoute path="/issue" component={Issue} token={this.props.login.token} />
            <Route component={Error}/>
           </Switch>
          </Layout>
        </Switch>
      </BrowserRouter>
    );
  }

如何将反应路由器错误与私有路由一起添加

How to add react router Error together with private routes

reactjs

react-router

react-router-v4