Предупреждение "Router may have only one child element" появляется, когда ты передаёшь несколько компонентов Route напрямую в Router без нормальной группировки. Компонент Router ожидает один дочерний элемент, а не несколько маршрутов на одном уровне.
Компонент <Switch> решает эту проблему, отображая маршруты эксклюзивно. Он гарантирует, что в один момент времени отображается только один совпадающий маршрут, и группирует несколько маршрутов под одним родительским элементом.
Шаг 1: Импортируем Switch
import { Switch, Router, Route } from 'react-router'
Шаг 2: Оборачиваем маршруты в Switch
Структурируй свой Router так, чтобы Switch был единственным дочерним элементом:
<Router>
<Switch>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
Если ты используешь React Router v6+, компонент <Switch> был заменён на <Routes>, который предоставляет аналогичный функционал, но с улучшенной производительностью и синтаксисом.
Предупреждение 'Router may have only one child element' возникает потому, что Router ожидает ровно один дочерний элемент, и обёртывание нескольких компонентов Route в <Switch> удовлетворяет этому требованию, предоставляя один родительский элемент.
Новый — ещё не проверен сообществом
Вы