本文详解 react router v6 中如何正确配置多级路由，解决因路由未声明导致的“no routes matched location”错误，并实现从首页点击按钮跳转至 /quiz 页面并渲染对应组件。
本文详解 react router v6 中如何正确配置多级路由，解决因路由未声明导致的“no routes matched location”错误，并实现从首页点击按钮跳转至 /quiz 页面并渲染对应组件。
在 React Router v6 中，所有可访问的路由必须在顶层 /quiz 路由仅被注释在 App.jsx 的主
✅ 正确做法：统一声明 + 传递参数
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>} />
<route path="/quiz" element="{<Quiz"></route>} /> {/* ✅ 必须在此处声明 */}
</routes></router>
);
}
2. 在 Fetch.jsx 中通过导航触发跳转（而非手动渲染）：
移除内部 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;
⚠️ 注意事项
- ❌ 不要在子组件中嵌套
- ✅ 所有路径必须在根
- ✅ 使用
navigate(path, { state })是跨组件传参的安全方式（state 不暴露在 URL 中）； - ✅ 若需 URL 可读（如
/quiz/react），应改用动态路由参数：path="/quiz/:category"+useParams()，并在navigate('/quiz/react')时传参。
✅ 总结
“No routes matched location” 错误本质是 Router 未注册该路径。修复核心是：删掉注释、统一声明、用导航代替手动渲染、用 state 或 params 传递上下文。这样既符合 React Router 最佳实践，也保障了路由可预测性与可维护性。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
