Реагировать на вложенный маршрут в корне

Question

Когда я пытаюсь использовать вложенные маршруты в моем корневом маршруте, я сталкиваюсь с проблемой. У меня есть 3 "основных" маршрута:

<Switch>
  <Route path="/" component={Home} />
  <Route path="/login" component={Login} />
  <Route path="/logout" component={Logout} />
</Switch>

На моем Home компоненте у меня есть такой вложенный маршрутизатор:

<div>
  <Route path="/" render={() => <div>Home</div>} />
  <Route path="/test" render={() => <div>Test Route</div>} />
</div>

Компонент Home имеет боковую панель HOC, которая содержит ссылки.

<Sidebar>
  <Link to="/">Home</Link>
  <Link to="/test">Test</Link>
  <Link to="/logout">Logout</Link>
</Sidebar>

Когда я нахожусь в моем Root-компоненте и щелкаю ссылку Test, маршрут на вложенном маршрутизаторе меняется на Тестовый компонент, который является правильным. Всякий раз, когда я прохожу маршрут входа и / или выхода из системы, он пытается отобразить его во вложенном маршрутизаторе в компоненте Home

Есть идеи, что не так?

РЕДАКТИРОВАТЬ: я пробовал пример @Tholle предоставлен. К сожалению, это все еще не работает так, как я хочу. См. CodeSandBox Я сделал, чтобы воспроизвести мою проблему.

Answer 1

ваши ссылки должны указывать на "/home/testX", а вложенные маршруты должны обрабатывать "/home/testX". Также вам понадобится маршрут для "/home" в корне. Я не верю, что компонент Link привязан к маршруту, по которому он вызывается. Это означает, что для ссылки на "/test1" предполагается, что это базовый маршрут. Однако рендеринг test1 фактически выполняется в домашнем компоненте.

Другими словами: чтобы добраться до /home/test1, сначала необходимо получить домашний компонент (/home) для рендеринга, который затем может отрендерить маршрут для test1 (/home/test1)

Вот коды и поле

Вот пример, который обеспечивает немного большую гибкость codesandbox . Для этого потребуется перенаправление «/», поскольку оно зависит от используемого пути и должно быть «/ home», а не «/".

Надеюсь, это поможет. Надеюсь, я все понял.

Answer 2

Компонент Switch обеспечивает отображение только первого совпадения Route. Чтобы <Route path="/" component={Home} /> не отображался всегда, вы можете установить точную опору в true.

Пример ( CodeSandbox )

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/login" component={Login} />
  <Route path="/logout" component={Logout} />
</Switch>