本文详解如何在 react router v6 中正确配置多路由，解决因路由未声明导致的“no routes matched location”错误，并实现从首页点击按钮跳转至 quiz 组件的完整流程。
本文详解如何在 react router v6 中正确配置多路由，解决因路由未声明导致的“no routes matched location”错误，并实现从首页点击按钮跳转至 quiz 组件的完整流程。
在 React Router v6 中，所有可访问的路由必须在顶层 <routes></routes> 内显式声明，不能仅靠 Link 或 navigate 触发跳转就自动生效。你遇到的 No routes matched location "/quiz" 错误，根本原因在于：/quiz 路由未在应用的主路由配置中注册——它被注释掉了：
{/* <Route path="/quiz" element={<Quiz />} /> */}即使你在 Fetch 组件内动态插入 <route></route>（如 isClicked && <route path="/quiz" ...></route>），该嵌套路由不会被 Router 上下文识别，因为 <routes></routes> 只会匹配其直接子元素中的 <route></route>，且这些子元素必须在组件挂载时即存在（不支持运行时条件注入）。
✅ 正确做法：统一在根 <router></router> 的 <routes></routes> 中声明所有有效路径，再通过编程式导航跳转。
✅ 推荐实现方案（简洁可靠）
1. 根 App.jsx 中完整声明两条路由：
构建 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
// 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>
);
}
export default App;2. Fetch.jsx 中使用 useNavigate 实现带参数的跳转（推荐）：
// Fetch.jsx
import { useNavigate } from 'react-router-dom';
function Fetch({ catData }) {
const navigate = useNavigate();
const handleClick = (cat) => {
// 方式一：携带搜索参数（URL 可见，适合简单数据）
navigate(`/quiz?category=${encodeURIComponent(cat)}`);
// 方式二：使用 state 传递（URL 干净，但刷新后丢失）
// navigate('/quiz', { state: { category: cat, data: /* your data */ } });
};
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 中读取参数或状态：
// Quiz.jsx
import { useSearchParams, useLocation } from 'react-router-dom';
function Quiz() {
const [searchParams] = useSearchParams();
const category = searchParams.get('category');
// 若用 navigate(..., { state }) 方式传参：
// const { state } = useLocation();
// const { category, data } = state || {};
return (
<div>
<h2>Quiz for Category: {category}</h2>
{/* 渲染逻辑 */}
</div>
);
}
export default Quiz;⚠️ 注意事项
- ❌ 不要尝试在子组件中动态渲染
<route></route>——<routes></routes>不支持条件渲染路由，这会导致路由系统无法匹配。 - ✅ 所有
path必须在顶层<routes></routes>中静态声明，这是 Router v6 的核心设计约束。 - ? 使用
<link>时，onClick和to同时存在可能引发冲突（如e.preventDefault()未处理），建议优先用useNavigate编程式导航，更可控。 - ? 若需向 Quiz 传递大量数据，推荐结合 Context、Redux 或 URL 搜索参数 + 后端 API 获取，避免过度依赖
state（因页面刷新会丢失）。
遵循以上结构，即可确保 /quiz 路由被正确识别、组件正常渲染，彻底解决空白页与匹配错误问题。
