Я попытался разделить компоненты Router и Switch в 2 разных файлах ради модульности, но это не сработает, и ошибки не имеют смысла ...
Основной файл, App.jsx, отображает что-то вроде этого:
<Router>
<div>
<Nav />
<AppRouter />
</div>
</Router>
Вы можете заметить, что Маршрутизатор содержит только 1 дочерний элемент, который является div.
AppRouter отображает что-то вроде этого:
<Switch>
<Route path="/" exact component={Home} />
<Route path="/list" exact component={List} />
<Route component={NotFound} />
</Switch>
В то время как Nav просто содержит список Link s:
<Link to="/">Home</Link>
Насколько я знаю, поскольку Router содержит только 1 дочернего элемента и поскольку Switch должен работать с несколькими дочерними элементами, этот код должен быть в порядке.
Однако этот код не работает:
Uncaught Error: A <Router> may have only one child element
Вы можете использовать живой пример здесь.
Я также заметил странное поведение: когда я удаляю некоторые Route s, так что остается только 1 Route, больше нет ошибки, но тогда навигация больше не работает (она меняет URL, ничего еще).
Что там происходит и как мне исправить мой код?