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

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

处理私有路由的正确方法如下。

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

如何添加反应路由器错误以及专用路由

1 个答案: