0

В react-router-dom v6 удалён HOC withRouter
А хук useParams при использовании вне Routes не возвращает параметры

Вопрос в следующем:
Посоветуйте как в коде ниже использовать параметры (без костылей)

function App() {
  return (
    <div>
      <Header />
      <Sidebar />
      <Content>
        <Router />
      </Content>
    </div>
  )
}

function Router() {
  return (
    <Routes>
        <Route path="/" element={<pages.Main />} />
        <Route path="/students" element={<pages.Students />} />
        <Route path="/personal" element={<pages.Personal />} />
    </Routes>
  )
}

Здесь, по задумке, Header и Sidebar находятся на странице всегда, при любом роуте
Но так как они находятся вне Routes не могу достать параметры через useParams

П.С. - Если добавить хедер и сайдбар внутрь Routes, приложение ломается с ошибкой:
Uncaught Error: [Header] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

3
  • А можете подсказать, как вы делаете такое название компонента <pages.Main />? 18 сен 2022 в 19:37
  • @OliverPatterson Допустим у вас есть папка pages и в ней файлы main,profile и тд. И так же в папке pages есть файл index.js. В нём вы экспортируете все компоненты этой папки export { default as Profile } from './profile' и export { default as Main} from './main' и тд. А далее там где хотите импортировать, импортируете всё под тем именем каким хотите import * as pages from '@pages'
    – HaZcker
    18 сен 2022 в 21:57
  • 1
    @OliverPatterson можете ознакомиться с этой ссылкой javascript.info/import-export#export-as и вот этой javascript.info/import-export#import-as
    – HaZcker
    18 сен 2022 в 22:03

1 ответ 1

0

Нашёл решение своего вопроса здесь:
https://stackoverflow.com/questions/70159726/making-sidebar-available-for-all-components-react-js-react-router-v6

Помогло использование компонента Outlet из react-router-dom

function PageLayout() (
  <div>
    <Header />
    <Sidebar />
    <div className="page-container">
      <Outlet />
    </div>
  </div>
)

function App() {
  return (
    <div>
      <Router />
    </div>
  )
}

function Router() {
  return (
    <Routes>
      <Route path="/" element={<PageLayout />} >
        <Route path="/" element={<pages.Main />} />
        <Route path="/students" element={<pages.Students />} />
        <Route path="/personal" element={<pages.Personal />} />
      </Route>
    </Routes>
  )
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.