我目前正在使用
react-router-dom
v6,但在路由器组件中包含必要的组件时遇到了麻烦,因为我没有使用 BrowserRouter
,而是将 RouterProvider
与 createBrowserRouter
一起使用。
import React from 'react'
// prettier-ignore
... Imports
const routes = createRoutesFromElements(
<Route path='/' element={<RootLayout />}>
<Route path='*' element={<NotFound />} />
<Route index element={<Landing />} />
<Route path='auth' element={<Auth />} />
<Route path='ideate' element={<IdeatorLayout />}>
<Route path=':sessionID' element={<Display />} />
</Route>
<Route path='privacy' element={<Privacy />} />
</Route>
)
const router = createBrowserRouter(routes)
export const App: React.FunctionComponent = () => {
useAuthControl()
return (
<RouterProvider router={router}>
<ScrollToTop />
</RouterProvider>
)
}
现在,我遇到了一个错误,其中包括
ScrollToTop
中的 RouterProvider
组件,因为我认为 RouterProvider
不接受儿童道具。我尝试查看文档,但找不到正确的方法。我的 ScrollToTop
组件使用 useHistory
来检查路径名何时更改,并自动滚动到顶部,因此我必须将其包含在路由器中。
提前感谢您的帮助!
RouterProvider
组件不消耗children
道具。
类型声明:
declare function RouterProvider( props: RouterProviderProps ): React.ReactElement; interface RouterProviderProps { fallbackElement?: React.ReactNode; router: Router; future?: Partial<FutureConfig>; }
通常,您会创建一个布局路由组件来渲染常见的 UI 组件,例如
ScrollToTop
。
示例:
import React from 'react'
// prettier-ignore
... Imports
const ScrollLayout = () => (
<>
<ScrollToTop />
<Outlet />
</>
);
const routes = createRoutesFromElements(
<Route element={<ScrollLayout />}>
<Route element={<RootLayout />}>
<Route index element={<Landing />} />
<Route path='auth' element={<Auth />} />
<Route path='ideate' element={<IdeatorLayout />}>
<Route path=':sessionID' element={<Display />} />
</Route>
<Route path='privacy' element={<Privacy />} />
<Route path='*' element={<NotFound />} />
</Route>
</Route>
);
const router = createBrowserRouter(routes)
export const App: React.FunctionComponent = () => {
useAuthControl();
return (
<RouterProvider router={router} />
);
}
您也很可能将
ScrollToTop
渲染为 RootLayout
布局路由组件的一部分,因为它也是在根路由级别渲染的。