В 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>
<pages.Main />
?pages
и в ней файлыmain
,profile
и тд. И так же в папкеpages
есть файлindex.js
. В нём вы экспортируете все компоненты этой папкиexport { default as Profile } from './profile'
иexport { default as Main} from './main'
и тд. А далее там где хотите импортировать, импортируете всё под тем именем каким хотитеimport * as pages from '@pages'