react router dom v6 在 RouterProvider 中包含一个组件

Question

我目前正在使用

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

来检查路径名何时更改，并自动滚动到顶部，因此我必须将其包含在路由器中。

提前感谢您的帮助！

Answer 1

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

布局路由组件的一部分，因为它也是在根路由级别渲染的。