Как визуализировать другой компонент с реагирующим маршрутизатором после входа пользователя

Question

У меня есть следующий класс маршрутизатора:

function Routes() {
  return (
    <BrowserRouter>
      <div className="App">
        <Switch>
          <Route path="/login" exact component={Login} />
          <Route path="/SignUp" exact component={SignUp} />
          <Route path="/ForgotPassword" exact component={ForgotPassword} />
          <Route path="/ChangePassword" exact component={ChangePassword} />

          <Authenticated>
            <Switch>
              <Route path="/startTest" exact component={StartTest} />
            </Switch>
          </Authenticated>

          <Authenticated>
            <Header />
            <Shell>
              <Switch>
                <Route path="/TestResult" exact component={TestResult} />
                <Route path="/TestList" exact component={TestList} />
                <Route path="/Home" exact component={Home} />
                <Route path="/" exact component={Home} />
                <Route component={GenericNotFound} />
              </Switch>
            </Shell>
            <Footer />
          </Authenticated>

          <Route component={GenericNotFound} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

Аутентификация. js

function Authenticated({ children }) {
  const history = useHistory();
  if (!IsLoggedIn()) {
    history.push(`/login`);
  }

  if (IsLoggedIn()) {
    return <>{children}</>;
  } else {
    return <></>;
  }
}

Как видите, есть два тега Authenticated Я использовал.

На основе страницы, например, если путь "/startTest" и пользователь вошел в систему, я не хочу загружать верхний / нижний колонтитул.

Но в других случаях, например, если пользователь на странице "Home", я хочу загрузить компонент Header/Footer.

Когда я пытаюсь просмотреть страницы Home/TestResult/TestList, он ничего не загружает. Если я удаляю один Authenticated компонентный тег из HTML, он работает нормально.

Answer 1

Вы должны возвращать только один компонент на маршрут и обрабатывать аутентификацию в маршрутизируемом компоненте. Вот пример, который обрабатывает ваш случай верхнего / нижнего колонтитула.

function Authenticated ({component: Component, hasFooterHeader, ...rest}) {
  const authed = IsLoggedIn();
  let page = <>;
  if (hasFooterHeader) {
    page = (
      <>
        <Header />
        <Shell>
          <Component {...rest} />
        </Shell>
        <Footer />
      <>
    );
  } else {
    page = <Component {...rest} />;
  }
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? page
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

И маршрутизация будет выглядеть так:

<Switch>
  <Route path="/login" exact component={Login} />
  <Route path="/SignUp" exact component={SignUp} />
  <Route path="/ForgotPassword" exact component={ForgotPassword} />
  <Route path="/ChangePassword" exact component={ChangePassword} />
  <Authenticated path="/startTest" exact component={StartTest} />
  <Authenticated path="/TestResult" exact component={TestResult} hasFooterHeader />
  <Authenticated path="/TestList" exact component={TestList} hasFooterHeader />
  <Authenticated path="/Home" exact component={Home} hasFooterHeader />
  <Authenticated path="/" exact component={Home} hasFooterHeader />
  <Authenticated component={GenericNotFound} hasFooterHeader />
  <Route component={GenericNotFound} />
</Switch>

Answer 2

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

Я предлагаю вам запечатать компонент Аутентифицированный и Макет под маршрутом

как baselayout.js в base затем accountlayout, pagelayout extension base, затем считывание массива маршрутизатора, например [ name :home, layout: pagelayout, auth: authed ] dynamici c загрузка маршрутизатора, использование js

это не подходит, мы Auth под BrowserRouter с Switch

Вы можете проверить UMI. js введите описание ссылки здесь