Как добавить ошибку маршрутизатора реакции вместе с частными маршрутами

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

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

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

const Error = () => {
  console.info('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>
    );
  }
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
241
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема заключается в том, что вы визуализируете маршруты без какого-либо регистра Switch, обертывающего PrivateRoutes. Поскольку компонент макета отображается во внешнем операторе Switch, если маршруты /login и /signup не совпадают, он будет автоматически отображаться без учета того, какой PrivateRoute соответствует. Таким образом, вам нужно обернуть Routes, отображаемые как компонент children to 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>
    );
  }

Другие вопросы по теме