React路由报错：useRoutes()仅可在<Router>组件上下文使用

核心问题分析 #

你遇到的报错useRoutes() may be used only in the context of a <Router> component，本质是所有路由相关组件必须被Router组件包裹，Routes和Route需要从Router获取上下文才能正常工作。另外你的App.js里还在用react-router-dom v5的写法，v6版本已经更改了Route的属性规则。

分步修复 #

1. 给App添加Router包裹（修改index.js） #

从react-router-dom引入BrowserRouter（静态部署场景可改用HashRouter），把App组件包裹在其中：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 新增：引入BrowserRouter并别名Router
import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 用Router包裹App，提供路由上下文 */}
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

2. 修正App.js的Route写法（适配v6版本） #

react-router-dom v6中，Route不再使用component属性，改用element且需传入组件实例（如<TemplateList />而非TemplateList）。同时v6默认路由匹配为精确匹配，无需写exact：

import { Routes, Route } from 'react-router-dom'
import TemplateList from './components/TemplateList'
import TemplateDetails from './components/TemplateDetails'

function App() {
    return (
        <Routes>
            <Route path="/" element={<TemplateList />} />
            <Route path="/template/:id" element={<TemplateDetails />} />
        </Routes>
    )
}

export default App

3. 模板列表页添加跳转功能（TemplateList示例） #

在列表组件中用Link实现点击跳转：

import { Link } from 'react-router-dom';

function TemplateList() {
  // 假设存在模板数据
  const templates = [
    { id: 1, name: "模板1", thumbnail: "/path/to/thumb1.jpg" },
    { id: 2, name: "模板2", thumbnail: "/path/to/thumb2.jpg" }
  ];

  return (
    <div className="template-list">
      {templates.map(template => (
        <div key={template.id} className="template-item">
          {/* 通过Link跳转并携带id参数 */}
          <Link to={`/template/${template.id}`}>
            <img src={template.thumbnail} alt={template.name} />
            <p>{template.name}</p>
          </Link>
        </div>
      ))}
    </div>
  );
}

export default TemplateList;

4. 模板详情页获取路由参数（TemplateDetails示例） #

用useParams钩子获取路由中的id参数：

import { useParams } from 'react-router-dom';

function TemplateDetails() {
  // 提取路由中的id参数
  const { id } = useParams();

  return (
    <div className="template-details">
      <h1>模板详情 - ID: {id}</h1>
      {/* 根据id渲染对应模板内容 */}
    </div>
  );
}

export default TemplateDetails;

验证修复 #

完成以上修改后重启项目，点击模板缩略图即可正常跳转到详情页，路由功能将恢复正常。

内容的提问来源于stack exchange，提问作者code-8