本文详解 react router v6 中如何正确配置多级路由，解决因路由未声明导致的“no routes matched location”错误，并实现从首页点击按钮跳转至 /quiz 页面并渲染对应组件。
本文详解 react router v6 中如何正确配置多级路由，解决因路由未声明导致的“no routes matched location”错误，并实现从首页点击按钮跳转至 /quiz 页面并渲染对应组件。
在 React Router v6 中，所有可访问的路由必须在顶层 <routes></routes> 内显式声明，且嵌套的 <routes></routes> 无法“补充”父级未定义的路径。你当前的问题根源在于：/quiz 路由仅被注释在 App.jsx 的主 <routes></routes> 中，而 Fetch.jsx 内部动态添加的 <route></route>（即使包裹在 <routes></routes> 中）不会被 Router 主干识别——React Router v6 不支持运行时动态注册路由，所有路由必须在初始化时静态声明。
将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新
✅ 正确做法：统一声明 + 传递参数
1. 在 App.jsx 中完整声明所有路由：
取消注释，并确保 /quiz 路由存在，同时使用 element 接收带 props 的组件（推荐使用 useParams 或 useLocation 获取动态数据）：
// App.jsx
import { Router, Routes, Route } from 'react-router-dom';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Fetch />} />
<Route path="/quiz" element={<Quiz />} /> {/* ✅ 必须在此处声明 */}
</Routes>
</Router>
);
}2. 在 Fetch.jsx 中通过导航触发跳转（而非手动渲染）：
移除内部 <routes></routes> 和动态 <route></route>，改用 useNavigate 进行编程式导航，并将分类数据通过 state 传递：
// Fetch.jsx
import { useNavigate } from 'react-router-dom';
function Fetch({ catData }) {
const navigate = useNavigate();
const handleClick = (cat) => {
// 将分类数据作为 state 传入 /quiz 页面
navigate('/quiz', { state: { category: cat, data: /* 你的完整数据 */ } });
};
return (
<>
{[...new Set(catData.map(c => c.category))].sort().map(cat => (
<div key={cat}>
<button onClick={() => handleClick(cat)}>
{cat}
</button>
</div>
))}
</>
);
}3. 在 Quiz.jsx 中接收并使用传递的数据：
使用 useLocation() 获取 state，避免 props 透传依赖：
// Quiz.jsx
import { useLocation } from 'react-router-dom';
function Quiz() {
const { state } = useLocation();
const { category, data } = state || {};
if (!category) return <div>无效访问，请从分类页进入</div>;
return (
<div>
<h2>测验：{category}</h2>
{/* 渲染 quiz 逻辑，使用 data */}
<pre class="brush:php;toolbar:false;">{JSON.stringify(data, null, 2)}
);
}
export default Quiz;⚠️ 注意事项
- ❌ 不要在子组件中嵌套
<routes></routes>来“临时添加”路由——这违反 v6 设计范式； - ✅ 所有路径必须在根
<routes></routes>中一次性声明； - ✅ 使用
navigate(path, { state })是跨组件传参的安全方式（state 不暴露在 URL 中）； - ✅ 若需 URL 可读（如
/quiz/react），应改用动态路由参数：path="/quiz/:category"+useParams()，并在navigate('/quiz/react')时传参。
✅ 总结
“No routes matched location” 错误本质是 Router 未注册该路径。修复核心是：删掉注释、统一声明、用导航代替手动渲染、用 state 或 params 传递上下文。这样既符合 React Router 最佳实践，也保障了路由可预测性与可维护性。
