Возвращенный React-Router <Route>не работает в свиче

Question

Я написал свое приложение очень модульно, так как каждый пакет (раздел приложения) является пакетом, и единственное, что я возвращаю из каждого пакета, это <Route to="/dest" component="something" />.

Проблема, с которой я столкнулся сейчас, заключается в том, что этот метод возврата на самом деле не работает, и вот как я его протестировал:

Первоначальная настройка была примерно такой:

<Switch>
 <Dashboard {...rest} />
 <Users {...rest} />
 <Quiz {...rest} />
</Switch>

А компонент Dashboard выглядит примерно так:

...
return (
    <Route exact path="/" render={ props => (
      <Dashboard {...props} {...stuff} />
    )}/>
  )

и почти то же самое для компонентов User и Quiz, которые напрямую импортируются из их пакетов модулей.

при запуске приложения я могу получить доступ к Dashboard & Users, но Quiz не отображается. если я изменю порядок и поставлю тест поверх <Users />, это сработает. это означает, что он может отображать только один за первым точный маршрут.

но вместо этого, если я возьму весь этот код и запишу Routes в самом коммутаторе, не ссылаясь на другой компонент, это работает как чудо.

<Switch>
 <Route exact path="/" render={ props => (
  <div>demo</div>
 )}/>
 <Route path="/dashboard" render={ props => (
  <div>demo</div>
 )}/>
 <Route path="/users" render={ props => (
  <Users />
 )}/>
 <Route path="/quiz" component="Users"/>              
</Switch>

Я пробовал оба компонента и рендеринг на маршруте, это всего лишь пример

есть какие-либо предположения о том, почему это происходит?

ОБНОВЛЕНИЕ 1

Мне не удалось выяснить, в чем заключается проблема и что ее вызывает, но я нашел способ обойти ее, создав компонент, который возвращает Switch и прямой Routes в качестве дочерних элементов. Затем я экспортировал Switch в мое основное приложение.

Answer 1

<Switch>
  <Dashboard {...rest} />
  <Users {...rest} />
  <Quiz {...rest} />
</Switch>

Это не будет работать, потому что Switch ожидает, что Route s будет прямым потомком. Он не может выполнять свою логику для произвольных компонентов оболочки.

Я не уверен, что это сработает, но вам придется напрямую экспортировать маршрут из модуля:

Dashboard.js

export default (
  <Route exact path="/" render={ props => (
    <Dashboard {...props} /> 
  )}/>
)

но когда вы делаете что-то вроде этого:

export default (stuff) => (
  <Route exact path="/" render={ props => (
     <Dashboard {...props} {...stuff} />
  )}/>
)

Обратите внимание, что вы экспортируете не Route, а функциональный компонент, который отображает маршрут.

Лично я считаю, что вы должны экспортировать только компоненты, которые будут отображаться без Route s, и оставить это на усмотрение потребителя библиотеки.