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

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

标签： reactjsreact-routerreact-router-v4

Answer 1

您遇到的问题是您正在渲染路由而没有任何 Switch 案例包装 PrivateRoutes。由于 Layout 组件在外部 Switch 语句中渲染 if/login和/signuproutes 不匹配，因此它将自动渲染，而不考虑哪个 PrivateRoute 匹配。因此，您需要将渲染为组件的路由包装在children其中Layout，Switch并且只有一个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>
    );
  }