React Router Dom传递状态报错：No routes matched location "/quiz"

核心问题分析 #

1. 路由不匹配：你的App组件中配置的Quiz路由是/quiz/:type（带动态参数），但点击提交按钮时调用history("/quiz")跳转到了无参数的/quiz路径，没有对应的路由规则，因此触发"No routes matched location "/quiz""错误。
2. 状态传递异步问题：setStore(value)是异步更新操作，提交时直接使用store可能拿不到最新的表单值；同时页面里的空Link组件没有实际作用，属于冗余代码。

修复方案 #

1. 修正路由跳转逻辑（Start.js） #

直接在提交函数中使用navigate传递最新表单值和路由参数，去掉冗余的store状态：

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./start.css";

function Start() {
  const navigate = useNavigate();
  const [value, setValue] = useState({
    fname: "",
    lname: "",
  });

  function AddData(event) {
    event.preventDefault();
    // 跳转到带参数的路由，并通过state传递表单值
    navigate("/quiz/parameter-data", { state: { local: value } });
  }

  function handle(event) {
    const { name, value: inputValue } = event.target;
    setValue(prevValue => ({ ...prevValue, [name]: inputValue }));
  }

  return (
    <div className="start">
      <div className="start-body">
        <form onSubmit={AddData}>
          <h2>Enter Details</h2>
          <input onChange={handle} type="text" placeholder="Enter firstName" name="fname" />
          <input onChange={handle} type="text" placeholder="Enter lastName" name="lname" />
          <button>Submit</button>
        </form>
      </div>
    </div>
  );
}

export default Start;

2. 优化Quiz组件的容错处理（Quiz.js） #

添加空值保护，避免路由状态不存在时报错：

import React from 'react'
import { useParams, useLocation } from 'react-router-dom';
import "./quiz.css";

function Quiz() {
  const { type } = useParams();
  const location = useLocation();
  // 用可选链和默认值防止state为空
  const userData = location.state?.local || { fname: "未知", lname: "用户" };
  
  return (
    <div className="quiz">
      姓名: {userData.fname} {userData.lname}
    </div>
  )
}

export default Quiz

3. 简化App.js的路由配置（可选） #

react-router v6的Routes组件默认会精确匹配路由，不需要exact属性，可以删除：

import React from "react";
import Start from "./Start";
import Quiz from "./Quiz";
import "./App.css";
import { Route, Routes } from "react-router-dom";

function App() {
  return (
    <>
      <Routes>
        <Route path="" element={<Start />} />
        <Route path="/start" element={<Start />} />
        <Route path="/quiz/:type" element={<Quiz />} />
      </Routes>
    </>
  );
}

export default App;

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