本文讲解如何在 react router v6 中正确配置多级路由，解决因路由未声明导致的 “no routes matched location” 错误，并实现从首页（/）点击按钮跳转并渲染 quiz 组件（/quiz）的完整流程。
本文讲解如何在 react router v6 中正确配置多级路由，解决因路由未声明导致的 “no routes matched location” 错误，并实现从首页（/）点击按钮跳转并渲染 quiz 组件（/quiz）的完整流程。
在 React Router v6 中，所有可访问的路径必须在顶层 isClicked && ）是无效的——因为 Router 在初始化时已静态解析所有子
你当前代码的问题核心在于：
- 主
App.jsx中/quiz路由被注释掉了（{/*），导致 Router 根本“不认识”} /> */} /quiz这个路径； - 而在
Fetch.jsx内部嵌套/quiz，违反了 v6 的路由设计原则：嵌套路由必须有父级element包裹，且子
✅ 正确做法：统一在根
✅ 推荐解决方案（简洁可靠）
1. 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>
);
}
export default App;
2. Fetch.jsx —— 使用 useNavigate 实现编程式导航（推荐）
构建 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
import { useNavigate } from 'react-router-dom';
function Fetch({ catData }) {
const navigate = useNavigate();
const [data, setData] = useState(null);
const handleClick = (cat) => {
// 模拟获取该分类数据（可替换为 API 调用）
const filteredData = catData.filter(c => c.category === cat);
setData(filteredData);
navigate('/quiz'); // ✅ 点击后跳转，Router 自动匹配已声明的 /quiz 路由
};
return (
{[...new Set(catData.map(c => c.category))].sort().map((cat) => (
<div key="{cat}">
<button onclick="{()"> handleClick(cat)}>
{cat}
</button>
</div>
))}
>
);
}
export default Fetch;
3. Quiz.jsx —— 通过 useLocation 或 useLoaderData（v6.4+）接收数据
import { useLocation } from 'react-router-dom';
function Quiz() {
const location = useLocation();
// 若需传递数据，建议使用 state（见下方注意事项）
const data = location.state?.quizData || [];
return (
<div>
<h2>Quiz Page</h2>
<pre class="brush:php;toolbar:false;">{JSON.stringify(data, null, 2)}
);
}
export default Quiz;
? 关键注意事项：
- ❌ 不要在组件内动态渲染
- ✅ 使用
useNavigate()+navigate('/quiz', { state: { data } })安全传递临时数据（state 不出现在 URL 中，刷新会丢失）； - ✅ 如需持久化数据，改用 URL search params（
?cat=math）或全局状态（Context / Zustand）； - ✅ 若需
/quiz页面复用不同数据，可在App.jsx中统一用 loader（v6.4+ Data APIs）或在Quiz内部根据useParams()或useSearchParams()动态获取。
这样配置后，点击按钮将正确导航至 /quiz，Router 找到已注册的路由并渲染 No routes matched location "/quiz" 错误。
