Компонент с маршрутами
Мне нужно сделать некоторые функции в CountryHoc, но мой код не работает. Кто-нибудь может объяснить мне, почему?
Это не работает
Приложение
<Routes>
<Route path='countries'>
<CountriesHoc/>
</Route>
</Routes>
СтраныHoc
<>
<Route path='known' element={<CountriesPage filteredArray={learnedCountries}/>}/>
<Route path='unknown' element={<CountriesPage filteredArray={notLearnedCountries}/>}/>
<Route path='all' element={<CountriesPage filteredArray={allCountries}/>}/>
</>
Ошибки:
================================================== ================================
Оно работает
Приложение
<Routes>
<Route path='countries'>
<Route path='known' element={<CountriesPage filteredArray={learnedCountries}/>}/>
<Route path='unknown' element={<CountriesPage filteredArray={notLearnedCountries}/>}/>
<Route path='all' element={<CountriesPage filteredArray={allCountries}/>}/>
</Route>
</Routes>
@DrewReese, мое приложение будет перерисовываться много раз, это всего лишь фрагмент кода
Не будет ли приложение перерисовываться много раз в любом случае? Я просто пытаюсь понять, что послужило причиной включения вложенных маршрутов в компонент-оболочку, для которого требуется другой компонент Routes. Мне интересно, была ли какая-то основная проблема, которую вы считаете исправленной с помощью компонента-оболочки.
@DrewReese В CountryHoc у меня есть useEffect, который делает запрос, нужен только в этом компоненте. Поэтому нет смысла делать запрос в компоненте приложения.
Ответы 3
измените свой код на этот, чтобы обернуть ваши маршруты внутри компонента Routes Router-dom
<Routes>
<Route path='known' element={<CountriesPage filteredArray={learnedCountries}/>}/>
<Route path='unknown' element={<CountriesPage filteredArray=
{notLearnedCountries}/>}/>
<Route path='all' element={<CountriesPage filteredArray={allCountries}/>}/>
<Routes/>
а также изменить родителя на
<Routes>
<Route path='countries' element={<CountriesHoc/>}/>
</Routes>
вы также можете добавить логическую опору индекса на первый маршрут в вашем дочернем компоненте, чтобы иметь компонент по умолчанию для получения показанного примечания, что он должен быть без опоры пути
Новые предупреждения «Нет маршрутов, соответствующих местоположению» и компоненты не отображаются.
благодарю вас. Просто замените <Route path='countries' element={<CountriesHoc/>}/> на <Route path='countries/*' element={<CountriesHoc/>}/>. И ваш ответ будет правильным.
Маршрут содержит реквизиты компонентов
Это отобразит компонент, который необходимо отобразить.
Приложение
<Routes>
<Route path='countries' component={CountriesHoc}/>
</Routes>
или
<Routes>
<Route path='countries' component={<CountriesHoc/>}/>
</Routes>
Уже пытался это сделать
import { Route, BrowserRouter, Routes } from "react-router-dom";
import { Home} from './Pages'
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
Уже сделал это.
Хорошая работа, вперед ☺
Что не так с использованием рабочего кода? Это более лаконично и работает.