如何在 React Router 中正确配置多组件路由并实现按钮点击跳转-js教程-PHP中文网

如何在 React Router 中正确配置多组件路由并实现按钮点击跳转

本文讲解 react router v6 中如何通过按钮点击触发路由跳转，并确保目标组件（如 quiz）能被正确渲染，解决“no routes matched location”错误的常见原因及完整配置方案。

本文讲解 react router v6 中如何通过按钮点击触发路由跳转，并确保目标组件（如 quiz）能被正确渲染，解决“no routes matched location”错误的常见原因及完整配置方案。

在 React Router v6 中，所有 <route></route> 必须定义在顶层 <routes></routes> 内部，且子路由不能动态嵌套在组件内部渲染——这是导致你遇到 No routes matched location "/quiz" 错误的根本原因。

你当前的代码中存在两个关键问题：

顶层 <routes></routes> 未声明 /quiz 路由：
App.jsx 中 <route path="/quiz" ...></route> 被注释掉了，导致 Router 根本无法识别 /quiz 这个路径，即使 URL 变成了 /quiz，也没有对应路由规则，因此渲染为空白并报错。
在 Fetch 组件内动态插入 <route></route> 是无效的：
```
<routes>
  {isClicked && <route path="/quiz" element="{<Quiz" data="{data}"></route>} />}
</routes>
```
这段代码不会生效。React Router v6 的 <routes></routes> 仅在初始化时静态解析其直接子 <route></route>，不支持运行时条件渲染 Route —— 它不是“按需注册路由”，而是“编译期路由声明”。

React Flow Architecture
提供使用 React Flow 构建基于节点的 UI 的架构指导，适用于设计基于流程的应用程序，在状态管理、交互和性能等方面进行决策。

下载

✅ 正确做法：提前声明所有有效路由，再通过导航逻辑（如 navigate 或 <link>）触发跳转。

✅ 推荐解决方案（结构清晰、符合 v6 规范）

1. 在 App.jsx 中完整声明路由：

// App.jsx
import { BrowserRouter as 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 [data, setData] = useState(null);

  const handleClick = (cat) => {
    // 模拟获取该分类下的题目数据
    const filteredData = catData.filter(item => item.category === cat);
    setData(filteredData);
    // ✅ 导航到 /quiz，同时可传递 state（推荐方式）
    navigate('/quiz', { state: { data: filteredData } });
  };

  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 { useLocation } from 'react-router-dom';

function Quiz() {
  const { state } = useLocation();
  const data = state?.data || [];

  if (data.length === 0) {
    return <p>暂无题目数据，请返回重试。</p>;
  }

  return (
    <div>
      <h2>题目列表（{data.length} 道）</h2>
      <ul>
        {data.map((item, idx) => (
          <li key="{idx}">{item.title}</li>
        ))}
      </ul>
</div>
  );
}

export default Quiz;

⚠️ 注意事项

不要试图在组件内部用 {isClicked && <route></route>} 动态注册路由 —— 这是反模式，Router 不会响应。
<link to="/quiz"> 本身可触发跳转，但若需同步传参或执行副作用（如 fetch 数据），优先使用 useNavigate() + onClick。
若需 URL 携带参数（如 /quiz?cat=math），可用 URLSearchParams 或 useParams 配合 :id 动态路由，但本例中 state 更安全（不暴露敏感数据、支持复杂对象）。
确保所有路由组件都导出为默认组件，且路径唯一、无冲突。