为什么我们需要将 BrowserRouter 包装在父组件中而不是路由子组件中以进行反应路由器 v6

Question

我尝试从 react-router-dom@6.4.1 创建 useRoutes 挂钩，以使用 JS 创建我的 App 路由，就像在我的 routes.jsx 中一样：

import { useRoutes,  } from "react-router-dom";
import TestPage from "../Pages/Public/TestPage";
import TestPageTwo from "../Pages/Public/TestPageTwo";

const redirectRoutes = [
    {
        path: "/no-match",
        element: () => <div>No Match found</div>,
    },
];

const Router = () => {
    const router = useRoutes([
        {
            path: "/testPage",
            element: <TestPage />,
            loader: false,
        },
        {
            path: "/testPageTwo",
            element: <TestPageTwo />,
            loader: false,
        },
        ...redirectRoutes,
    ]);
    return <BrowserRouter>{router}</BrowserRouter>;
};

export default Router;

在我的 app.jsx 中，我像这样导入了文件：

import { Provider } from "react-redux";
import Router from "./Router";
import initializeStore from "./Reducer/initializeStore";
import "./App.css";

export const store = initializeStore();

const App = () => {
    return (
        <Provider store={store}>
            <Router />
        </Provider>
    );
};

export default App;

这导致了以下错误：

未捕获的错误：useRoutes() 只能在组件的上下文中使用。

如您所见，我在 app.jsx 中使用 BrowserRouter 包装了路由，但仍然出现此错误。 但是，当我将 BrowserRouter 移动到 app.jsx 而不是 routes.jsx 时，我能够解决这个问题，如下所示：

应用程序.jsx：

...
const App = () => {
    return (
        <Provider store={store}>
            <BrowserRouter>
                <Router />
            </BrowserRouter>
        </Provider>
    );
};
...

并且，在 routes.jsx 中，我只返回使用 useRoutes(); 创建的路由器；

我不明白为什么我们需要像这样在 app.jsx 中包装来自 react-router-dom@6 的 BrowserRouter 而不是 routes.jsx。

Answer 1

在react-router和react-router-dom中，路由器组件是为所有 RRD 挂钩和组件访问提供路由上下文的组件。 它是一个 React 上下文，需要在 ReactTree 中提供比任何使用它的组件更高的位置。

不起作用：

const Router = () => {
  const router = useRoutes([ // <-- accessed here outside context, error!!
    ....
  ]);
  return <BrowserRouter>{router}</BrowserRouter>; // <-- provided here
};

...

const App = () => {
  return (
    <Provider store={store}>
      <Router />
    </Provider>
  );
};

作品：

const Router = () => {
  const router = useRoutes([ // <-- accessed here inside context, no issue :)
    ....
  ]);
  return router;
};

...

const App = () => {
  return (
    <Provider store={store}>
      <BrowserRouter> // <-- provided here
        <Router />
      </BrowserRouter>
    </Provider>
  );
};

有关更多详细信息，请参阅React 上下文 API 。