Как добавить реакцию маршрутизатора Ошибка вместе с приватными маршрутами - PullRequest
0 голосов
/ 03 июня 2019

Я использую реагировать и реагировать маршрутизатор v4 для маршрутизации. Я создал PrivateRoutes для аутентификации и, поскольку я их реализовал, я не могу использовать Error route для несоответствия.

Ошибка route работает каждый раз, когда я попадаю на неправильную страницу, но проблема в том, что она отображается каждый раз для любого маршрута.

Я пытался создать обычную страницу, но каждая открытая страница сначала отрисовывается, а затем после этого я вижу, что так и должно быть

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

1 Ответ

1 голос
/ 03 июня 2019

Проблема, с которой вы столкнулись, заключается в том, что вы обрабатываете маршруты без какого-либо случая коммутатора, оборачивая PrivateRoutes. Поскольку компонент Layout выполняет рендеринг во внешнем операторе Switch, если маршруты /login и /signup не совпадают, он будет автоматически отображаться без учета того, какой PrivateRoute соответствует. Таким образом, вам нужно обернуть маршруты, отображаемые как children в Layout компонент, в Switch и иметь только один экземпляр Error route

Правильный способ обработки 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>
    );
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...