React Router问题：点击按钮切换/quiz路由后页面空白报错

1. 修正App.jsx的路由配置 #

先把App里注释掉的/quiz路由恢复，让路由系统能匹配到/quiz路径：

<Router>
  <Routes>
    <Route path="/" element={<Fetch />} />
    <Route path="/quiz" element={<Quiz />} /> {/* 取消注释该行 */}
  </Routes>
</Router>

2. 移除Fetch.jsx中的冗余嵌套路由 #

当路径切换到/quiz时，App的路由会直接渲染Quiz组件，此时Fetch组件已经被卸载，里面的<Routes>部分完全无效，直接删除即可：
修改后的Fetch.jsx代码片段：

<>
  {[...new Set(catData.map((c) => c.category))].sort().map((cat) => (
    <div key={cat}>
      <Link to="/quiz" >
        <p onClick={() => handleClick(cat)}>{cat}</p>
      </Link>
    </div>
  ))}
</>

3. 可选：传递分类数据到Quiz组件 #

如果需要把Fetch中选中的分类数据传给Quiz，可以通过路由状态传参：

• 调整Fetch里的Link：

<Link to={{ pathname: "/quiz", state: { data: data } }} >
  <p onClick={() => handleClick(cat)}>{cat}</p>
</Link>

• 在Quiz组件中获取数据：

import { useLocation } from 'react-router-dom';

function Quiz() {
  const location = useLocation();
  const data = location.state?.data;
  
  // 后续逻辑使用data即可
  return (
    // 组件内容
  );
}

问题根源 #

• 之前注释了App里的/quiz路由规则，导致路由系统找不到匹配/quiz的路由，触发"No routes matched location "/quiz""错误。
• Fetch里的嵌套路由完全无效，因为路径切换到/quiz时，Fetch组件已经被卸载，内部的路由不会被渲染。

内容的提问来源于stack exchange，提问作者Nora