Question

在 React 中的函数组件中放置 <BrowserRouter> 和 useRoutes(routes) 时出错

2022-05-03

2433

javascript reactjs react-router jsx

我在我的 React 应用中使用 react-router-dom 。当我使用：

function App() {
    return (
        <BrowserRouter>{ useRoutes(routes) }</BrowserRouter>
    );
}

并且我收到错误消息： 未捕获错误：useRoutes() 只能在 <Router> 组件的上下文中使用。

我搜索了如何修复它并将我的代码结构更改为：

function App() {
    return (
        <BrowserRouter><Foo/></BrowserRouter>
    );
}
function Foo() { 
    return useRoutes(routes)
}

代码运行正常。

作为初学者，我无法说出上面两个代码片段之间的确切区别，有人可以帮忙吗？

Answer 1

Uncaught Error: useRoutes() may be used only in the context of a <Router> component.

这条消息的全部含义是，在使用 useRoutes 钩子时，ReactTree 中需要有一个比试图使用它的 App 组件更高的路由上下文提供程序。

一个更清晰的坏例子：

function App() {
  const routes = useRoutes(routes); // <-- (2) but needed here!
  return (
    <BrowserRouter> // <-- (1) context provided here
      {routes}
    </BrowserRouter>
  );
}

在这里您可以清楚地看到路由器位于下方 App 组件，并且没有为 App 提供路由上下文。

这就是第二个代码片段有效的原因，它提供的路由上下文高于使用它的组件。

function App() {
  return (
    <BrowserRouter> // <-- (1) context provided here
      <Foo/> // <-- (2) context consumed here
    </BrowserRouter>
  );
}

function Foo() { 
  return useRoutes(routes);
}

Answer 2

这是另一个抛出错误的示例，感谢 @drew-reese 的解释，该错误已得到修复：

create-react-app 构建了以下 TypeScript 测试文件：

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

修复方法是包含 BrowserRouter

import { BrowserRouter } from "react-router-dom";

并包装 <App /> 以获取路由上下文：

render(<BrowserRouter><App /></BrowserRouter>);