Компонент с маршрутами

Мне нужно сделать некоторые функции в 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}/>}/>
</>

Ошибки:

enter image description here

================================================== ================================

Оно работает

Приложение

<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>

Что не так с использованием рабочего кода? Это более лаконично и работает.

Drew Reese 17.05.2022 19:27

@DrewReese, мое приложение будет перерисовываться много раз, это всего лишь фрагмент кода

Donnle 17.05.2022 20:49

Не будет ли приложение перерисовываться много раз в любом случае? Я просто пытаюсь понять, что послужило причиной включения вложенных маршрутов в компонент-оболочку, для которого требуется другой компонент Routes. Мне интересно, была ли какая-то основная проблема, которую вы считаете исправленной с помощью компонента-оболочки.

Drew Reese 17.05.2022 20:53

@DrewReese В CountryHoc у меня есть useEffect, который делает запрос, нужен только в этом компоненте. Поэтому нет смысла делать запрос в компоненте приложения.

Donnle 17.05.2022 21:43
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
1
4
28
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

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

Новые предупреждения «Нет маршрутов, соответствующих местоположению» и компоненты не отображаются.

Donnle 17.05.2022 12:44

благодарю вас. Просто замените <Route path='countries' element={<CountriesHoc/>}/> на <Route path='countries/*' element={<CountriesHoc/>}/>. И ваш ответ будет правильным.

Donnle 17.05.2022 13:16

Маршрут содержит реквизиты компонентов

Это отобразит компонент, который необходимо отобразить.

Приложение

<Routes>
  <Route path='countries' component={CountriesHoc}/>
</Routes>

или

<Routes> 
 <Route path='countries' component={<CountriesHoc/>}/> 
</Routes>

Уже пытался это сделать

Donnle 17.05.2022 12:47
import { Route, BrowserRouter, Routes } from "react-router-dom";
import { Home} from './Pages'


<BrowserRouter>
        <Routes> 
              <Route path="/" element={<Home />} /> 
        </Routes>
</BrowserRouter>

Уже сделал это.

Donnle 17.05.2022 12:45

Хорошая работа, вперед ☺

Amr Ata 17.05.2022 12:52

Другие вопросы по теме

React-router-dom V6 неправильно меняет маршрут (обновить — требуется страница f5)
Как использовать onSubmit в реагирующем маршрутизаторе, в то время как onSubmit проверяет детали в форме и, если это правильно, он передает Link="" другому компоненту
Как запретить пользователю возвращаться в react-router v6?
Как использовать реагирующий маршрут с href
Как реализовать реагирующий маршрутизатор с необработанным javascript? (бэкэнд .net core mvc)
Создайте приложение CRUD с помощью React Hooks и Context API
Должен ли я использовать перенаправление React Router ИЛИ свойство «домашняя страница» package.json для установки относительного пути в качестве домашней страницы в моем приложении React
Как сделать ссылку на другую страницу на боковой панели мини-ящика MUI?
Как создать глубокие пути в древовидной структуре в react-router v6
Как правильно настроить маршрутизатор React для перехода на новую страницу?