параметры компонентов вне react-router-dom 6

Question

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

Answer 1

Нашёл решение своего вопроса здесь:
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>
  )
}

БЛОГ НА HUSL

параметры компонентов вне react-router-dom 6

Ответы (1 шт):