如何在 React Router 中通过按钮点击导航并动态渲染不同路由组件-js教程-PHP中文网

如何在 React Router 中通过按钮点击导航并动态渲染不同路由组件

本文详解如何在 react router v6 中正确配置多路由，解决因路由未声明导致的“no routes matched location”错误，并实现从首页点击按钮跳转至 quiz 组件的完整流程。

本文详解如何在 react router v6 中正确配置多路由，解决因路由未声明导致的“no routes matched location”错误，并实现从首页点击按钮跳转至 quiz 组件的完整流程。

在 React Router v6 中，所有可访问的路由必须在顶层内显式声明，不能仅靠 Link 或 navigate 触发跳转就自动生效。你遇到的 No routes matched location "/quiz" 错误，根本原因在于：/quiz 路由未在应用的主路由配置中注册——它被注释掉了：

{/* <route path="/quiz" element="{<Quiz"></route>} /> */}

即使你在 Fetch 组件内动态插入（如 isClicked && ），该嵌套路由不会被 Router 上下文识别，因为只会匹配其直接子元素中的，且这些子元素必须在组件挂载时即存在（不支持运行时条件注入）。

✅ 正确做法：统一在根的中声明所有有效路径，再通过编程式导航跳转。

✅ 推荐实现方案（简洁可靠）

1. 根 App.jsx 中完整声明两条路由：

shopify-app-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

下载

// 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 实现带参数的跳转（推荐）：

// 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;

⚠️ 注意事项

❌ 不要尝试在子组件中动态渲染 —— 不支持条件渲染路由，这会导致路由系统无法匹配。
✅ 所有 path 必须在顶层中静态声明，这是 Router v6 的核心设计约束。
? 使用时，onClick 和 to 同时存在可能引发冲突（如 e.preventDefault() 未处理），建议优先用 useNavigate 编程式导航，更可控。
? 若需向 Quiz 传递大量数据，推荐结合 Context、Redux 或 URL 搜索参数 + 后端 API 获取，避免过度依赖 state（因页面刷新会丢失）。

遵循以上结构，即可确保 /quiz 路由被正确识别、组件正常渲染，彻底解决空白页与匹配错误问题。