Как показать маршрут "Не найдено" в реакции при использовании контейнера маршрута?

Question

Маршрут "Не найден" не отображается для меня при использовании маршрутизатора реагирования 5.1.

index. js:

function AuthedContainer() {
  const { loading, token, name, refreshError } = useCheckAccessToken();

  return (
    <Fragment>
      <LoadingOverlay loadingStatus={loading} />
      <NavBar name={name} />
      {isAllowed(userPermissions, ["view_results"]) && (
        <PrivateRoute exact path="/table" component={Table} token={token} />
      )}
      <Route component={NotFound} />
    </Fragment>
  );
}

const routes = (
  <BrowserRouter>
    <Switch>
      <Route exact path="/login" component={LoginForm} />
      <Route exact component={AuthedContainer} />
    </Switch>
  </BrowserRouter>
);

ReactDOM.render(routes, document.getElementById("root"));

Я попытался разместить маршрут "Не найден" в пределах маршрута, но это не сработало.

const routes = (
  <BrowserRouter>
    <Switch>
      <Route exact path="/login" component={LoginForm} />
      <Route exact component={AuthedContainer} />
      <Route component={NotFound} />
    </Switch>
  </BrowserRouter>
);

Я обнаружил, что маршрут "Не найдено" должен находиться непосредственно в компоненте коммутатора, поэтому я попытался выполнить рефакторинг так, чтобы все мои маршруты, включая аутентифицированные находятся в одном компоненте коммутатора. Однако я не хочу, чтобы хук вызывался useCheckAccessToken(), когда я нахожусь на маршруте /login.

Может кто-нибудь посоветовать, как заставить работать маршрут "Не найден", не вызывая аутентифицированный хук когда не залогинен? (если есть токен, значит вы вошли в систему)

Answer 1

В итоге все маршруты у меня были в 1 коммутаторе, а затем были разные схемы для авторизованных маршрутов.

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        {pages.map(
          (
            {
              exact,
              path,
              component: Component,
              layout: Layout,
              requiredPermissions
            },
            index
          ) => (
            <Route
              key={index}
              exact={exact}
              path={path}
              render={props => (
                <Layout requiredPermissions={requiredPermissions}>
                  <Component {...props} />
                </Layout>
              )}
            />
          )
        )}
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

Каждая страница может быть определена так:

export const pages = [
  // Public pages
  {
    exact: true,
    path: routes.login,
    component: LoginPage,
    layout: PublicLayout,
    requiredPermissions: []
  },
  // Authenticated pages
  {
    exact: true,
    path: routes.dashboard,
    component: Dashboard,
    layout: AuthedLayout,
    requiredPermissions: []
  },
...

Обработка токенов будет выполняться в «AuthedLayout»:

export default function AuthedLayout(props) {
  const { loading, token, name, refreshError } = useCheckAccessToken();
  const userPermissions = GetUserPermissions(token);

  return !refreshError ? (
      <Fragment>
        <LoadingOverlay loadingStatus={loading} />
        <NavBar name={name} />
        <props.children.type token={token} userPermissions={userPermissions} />
      </Fragment>
  ) : !(!loading && token && name && !refreshError) ? (
    <Redirect to="/login" />
  ) : (
    "Unhandled Exception."
  );
}

Надеюсь, что это кому-то помогло.

Answer 2

попробуй

function AuthedContainer() {
  const { loading, token, name, refreshError } = useCheckAccessToken();

  if(token){
    return (
      <Fragment>
        <LoadingOverlay loadingStatus={loading} />
        <NavBar name={name} />
        {isAllowed(userPermissions, ["view_results"]) && (
          <PrivateRoute exact path="/table" component={Table} token={token} />
        )}
      </Fragment>
    );
  }else{
    <NotFound/>
  }