React Router 4 - Определение маршрутов без маршрутов

Question

Я сталкиваюсь с проблемами, пытаясь определить маршруты без пути (которые были возможны в реакции маршрутизатора 3). По сути, я пытаюсь добиться чего-то вроде: в моем index.js:

 <Router history={history}>
        <Route path="/" component={App}/>
    </Router>

В моем приложении компонент определить макеты

<Switch>
    <Route path="" component={AuthLayout}/>
    <Route path="" component={MainLayout}/>
</Switch>

теперь, поскольку они являются просто макетами, я хочу, чтобы они выполняли некоторые функции и определяли свои вложенные маршруты, например

в AuthLayout:

<Switch>
     <Route exact path={`${match.path}/sign-up`} component={SignUpContainer}/>
     <Route exact path={`${match.path}/login`} component={LoginContainer}/>
                                <Route component={SignUpContainer}/>
</Switch>

и в MainLayout:

    <Switch>
      <Route exact path={`${match.path}/explorer`} component={ExplorerContainer}/>
//more routes 
      <Route component={NotFoundContainer}/>
    </Switch>

Теперь я знаю, что это не сработает, потому что switch всегда будет попадать в первый элемент, а без Switch будет отображаться оба компонента. Чего я хочу добиться, так это небольшого URL, поэтому я не хочу определять маршруты для макетов. Это было возможно в RRTR 3, но я просто не могу понять, смогу ли я сделать это в RRTR 4

просто для справки в 3 я сделал это так:

<Route path="/" component={App}>
            <IndexRedirect to="login"/>
            /*Profile Management Flows*/
            <Route path="" component={AuthLayout}>
                <Route path="login" component={LoginContainer}/>
                <Route path="sign-up" component={SignUpContainer}/>
                <Route path="forgot-password" component={ForgotPasswordContainer}/>
                <Route path="reset-password" component={ResetPasswordContainer}/>
                <Route path="on-boarding" component={OnBoardingContainer}/>


            </Route>

Любой совет? я должен просто сдаться и добавить путь к каждому макету? Должен ли я придерживаться RRTR3?

Answer 1

Да, вы не сможете сделать точно то же, что и с React Router 3. Я думаю, что нечто подобное может быть достигнуто с помощью следующего:

<Switch>
  <Route path="/(login|signup|forgot-password|reset-password)" render={({ location }) => (
    <AuthLayout>
        <Switch>
          <Route path="/login" component={/* ... */} />
          <Route path="/signup" component={/* ... */} />
          {/* ... */}
        </Switch>
    </AuthLayout>
  )} />
  <Route path="/" component={MainLayout} />
</Switch>

Answer 2

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

<Switch>
     <Route path="/sign-up" component={SignUpContainer}/>
     <Route path="/login" component={LoginContainer}/>
     <Route path="/explorer" component={ExplorerContainer}/>
     <Route path="/" component={MainLayout} />
</Switch>

Если вы хотите защитить маршруты от неавторизованных пользователей, вы можете использовать компонент высшего порядка. Я объяснил, как это может быть достигнуто здесь: React router v4 - Авторизованные маршруты и компоненты

Я нашел следующую статью о React Router 4 очень полезной: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf