React Router: маршруты внутри маршрутов - PullRequest
Новая
       19

React Router: маршруты внутри маршрутов

0 голосов
/ 10 июля 2019

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

Для начала я хочу, чтобы пользователи, вошедшие в систему, были перенаправлены непосредственно в приложение, когда они достигли корня ("/"), и на статический / маркетинговый сайт, когда они не вошли в систему. Основной маркетинговый сайтДомашняя страница имеет панель навигации, которая позволяет пользователям получать доступ к другим маршрутам, таким как «/ about», тогда как приложение имеет отдельную панель навигации для навигации по приложению.

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

Top-level / index.js 

const routing = (
  <Provider store={store}>
    <Router>
      <NavWrapper />
      {/* <Switch> */}
      <Route exact path="/" component={AuthWrapper} />
      <Route path="/signup" component={SignUp} />
      <Route path="/login" component={Login} />
      {/* </Switch> */}
    </Router>
  </Provider>
)

ReactDOM.render(routing, document.getElementById('root'));

AuthWrapper.js (здесь useAuth() - это ловушка React, которая оценивает глобальное состояние Redux isAuthenticated) 

const AuthWrapper = (props) => {
  return useAuth() ? <App /> : <Website />
}

export default AuthWrapper;

website / index.js 

export const Website = () => {
  return (
    <>
      {/* <SiteNav /> */}
      <Switch>
        <Route exact path="/" component={LandingPage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/how-it-works" component={HowItWorksPage} />
        <Route path="/plans" component={PlansPage} />
        <Route path="/press" component={PressPage} />
        <Route path="/faq" component={FAQPage} />
        <Route path="/legal" component={LegalPage} />
        <Route path="/for-dieticians" component={DietitiansPage} />
        <Route path="/for-trainers" component={PTsPage} />
      </Switch>
  </>
  )
};

В моем приложении при вводе localhost: 3000 / (без проверки подлинности) меня правильно перенаправляют на домашнюю / целевую страницу.Тем не менее, если я пытаюсь использовать навигацию (или вводить любые подстроки) для доступа к «/ about», например, я получаю пустой экран (кроме навигационной панели).В инструментах React dev этот компонент даже не отображается.

1 Ответ

0 голосов
/ 11 июля 2019

Я думаю, что это проблема: 

<Route exact path="/" component={AuthWrapper} />

Вы хотите, чтобы Authwrapper показывался примерно так же, верно? Но приведенное выше соответствует только «/».

Вы должны включить оператор switch, но переместите AuthWrapper Route в нижнюю часть и затем оставьте для него следующий путь: "/: rest *" (возможно, "/ *" тоже работает, не использовал response-router в в то время).

Таким образом, он будет использовать маршрут, если первые 2 не совпадают.

...