Чем отличаются компоненты <Route> и <Routes>?
Этот вопрос проверяет понимание различий между основными компонентами маршрутизации и их предназначением.
Короткий ответ
<Route> определяет отдельный маршрут и связан с конкретным компонентом, который отображается при совпадении URL. <Routes> является контейнером для <Route> и отвечает за поиск первого подходящего маршрута. Без <Routes> компоненты <Route> не будут работать корректно в новых версиях React Router.
Длинный ответ
В React Router DOM компоненты <Route> и <Routes> выполняют разные задачи:
<Route>: Этот компонент описывает маршрут: путь (path) и то, какой компонент (element) будет отображаться при совпадении. Он является базовым строительным блоком для маршрутизации.
<Route path="/about" element={<About />} />
<Routes>: Это контейнер для всех <Route>. В версиях React Router 6 и выше он заменяет <Switch>. <Routes> проверяет маршруты сверху вниз и отображает первый совпавший маршрут. Без <Routes> маршруты работать не будут.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
Ключевое отличие:
- <Route> определяет отдельный маршрут.
- <Routes> организует их проверку, чтобы выбрать подходящий маршрут для текущего URL.