通过 React Router 以 props 的形式传递状态

Question

我想在反应路线的帮助下将状态作为道具传递 但它确实给出了错误 No routes matched location "/quiz"

这是 App.js 文件

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 exact path="" element={<Start/>} />
   <Route exact path="/start" element={<Start/>} />
   <Route exact path="/quiz/:type" element={<Quiz />} />
   
   </Routes>
   </>
  
  )
}

export default App

这是 start.js 文件

import React,{useState} from 'react'
import{useNavigate,Link} from "react-router-dom";



import "./start.css"

function Start() {
    const history = useNavigate();
    const[value,setValue]=useState({
        fname:"",
        lname:""
    });
    const[store,setStore]=useState("");
 
    function AddData(event){
     
     setStore(value);
  
    
    event.preventDefault();
    history("/quiz")
    }
    function handle(event){
        const{name,value}=event.target;
      setValue(prevValue=>{
      return { ...prevValue,
        [name]:value}
      })

    }


  
    
    
    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>
       <Link to={{
        pathname:"/quiz/parameter-data",
        state:{local:store}
       }}></Link>
       
       
       </form>
       </div>
     
    </div>
  )
  }


export default Start

在这里，当我单击按钮时，它会路由到以状态为道具的测验组件 但它什么也不会显示，并在控制台中给出错误，即 No routes matched location "/quiz"

这是测验文件

import React from 'react'
import {useParams,useLocation} from 'react-router-dom';
import "./quiz.css";
function Quiz() {
    const{type}=useParams();
    const value =useLocation().state.local;
  return (
    <div className="quiz">
        name:{value};  
    </div>
  )
}

export default Quiz

这是我使用 browserRouter 的 index.js 文件

import React from "react"
import ReactDom from "react-dom"
import App from "./App"
import {BrowserRouter } from "react-router-dom"

    ReactDom.render(
    <BrowserRouter>
    <App />
    </BrowserRouter>
    
    ,document.getElementById('root'));

Answer 1

1. 首先我会建议你调用useNavigatenavigate而不是history返回的值，因为history是以前版本的React Router Dom中使用的命名：

   const navigate = useNavigate();
   

   2. 其次，您正在导航至 "/quiz"，它在您的路线设置中不存在。只有"/quiz/something"。更改AddData如下：

   function AddData(event) {
    setStore(value);
    event.preventDefault();
    navigate(`/quiz/${"value-to-get-with-useParams()-goes-here"}`, {
    state: { local: "value-to-get-with-useLocation()-goes-here" },
    });
   }