useRoutes() 只能在 Router 组件的上下文中使用

useRoutes() may be used only in the context of Router component

useRoutes当我们尝试在 React Router 中的 Router 上下文之外使用钩子时，会出现错误“useRoutes() may be used only in the context of a Router component” 。

要解决该错误，请useRoutes仅在 Router 上下文中使用钩子。

userroutes 只能在路由器上下文中使用

Router这是将 React 应用程序包装在文件中的示例index.js
。

索引.js

复制了！
import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ wrap App in Router

root.render(
  <Router>
    <App />
  </Router>
);

useRoutes现在您可以在文件中使用该挂钩App.js。

应用程序.js

复制了！
import React from 'react';
import {
  useRoutes
} from 'react-router-dom';

export default function App() {
  let element = useRoutes([
    {path: '/', element: <Home />},
    {path: '/about', element: <About />},
  ]);

  return element;
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

发生错误的原因是useRoutes钩子使用了组件提供的上下文
Router，因此它必须嵌套在Router.

用组件包装 React 应用程序的最佳位置Router是在index.js文件中，因为那是 React 应用程序的入口点。

一旦你的整个应用程序被一个Router组件包装起来，你就可以在你的组件中的任何地方使用 React Router 包中的任何钩子。

使用组件而不是对象来包装你的路由

钩子useRoutes的功能相当于Routes，因此您还可以使用组件而不是对象来定义路由。

应用程序.js

复制了！
import React from 'react';
import {BrowserRouter as Router, Route, Link, Routes} from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        {/* 👇️ Wrap your Route components in a Routes component */}
        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

React 路由器使用简化的路径格式，其中<Route path>有 2 种占位符：

动态:id参数
*通配符

通配符*语法只能用在路径末尾。

应用程序.js

复制了！
import React from 'react';
import {BrowserRouter as Router, Route, Link, Routes} from 'react-router-dom';
import {useParams} from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              {/* 👇️ link to dynamic path */}
              <Link to="/users/4200">Users</Link>
            </li>
            <li>
              {/* 👇️ link to catch all route */}
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

        {/* 👇️ Wrap your Route components in a Routes component */}
        <Routes>
          <Route path="/about" element={<About />} />
          {/* 👇️ handle dynamic path */}
          <Route path="/users/:userId" element={<Users />} />
          <Route path="/" element={<Home />} />
          {/* 👇️ only match this when no other routes match */}
          <Route
            path="*"
            element={
              <div>
                <h2>404 Page not found etc</h2>
              </div>
            }
          />
        </Routes>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  const params = useParams();

  return <h2>Users: {params.userId}</h2>;
}

该路由<Route path="/users/:userId" element={<Users />} />使用动态
userId参数，我们可以使用useParams钩子访问该动态参数。

该路线将匹配后的任何内容/users/，例如/users/123或
/users/asdf。

路径等于的路由用作*包罗万象的路由。它仅在没有其他路由匹配时才匹配。

更多示例请参考

react router的官方文档页面。

我还写了一份关于
如何处理 React Router 中未找到的 404 页面的详细指南。