為什么這個反應路線會拋出沒有路線匹配位置的錯誤？

Question

我在我的代碼中遇到了一些與路由相關的問題，我收到錯誤“react_devtools_backend.js:4026 No routes match location”/airlines/1/reviews/new”。那是我試圖對特定航空公司進行評論時。這里是我的代碼我有 App.js-Airlines.js-AirlineCard.js-Reviews.js-AddReviewForm

App.js.我的路由在這里定義

 const[reviews,setReviews]=useState([]); 
.
.
.

            <Routes>

          <Route exact  path="/airlines" element={<><Search search={search} onSearchChange={setSearch} /><Airlines  /></>} />
           
          <Route exact  path="/myprofile" element={<MyProfile />} />
          
       
          <Route exact  path="/airlines/:id" element={<Reviews reviews={reviews} setReviews={setReviews} />} />
           
          <Route path="/airlines/${id}/reviews/new" element={ <AddreviewForm />} />
        
          <Route exact path="/" element={<Home user={user}/>} />
        
        </Routes>
```[enter image description here][1]

Airlines.js

函數航空公司(){ const[airlines,setAirlines]=useState([]);

useEffect(()=>{
    fetch("/airlines")
    .then(res=>res.json())
    .then(airData=>{
      setAirlines(airData)
    })
  
   },[])
  

   
return(
    <>
    <h1>Airlines</h1>
   {airlines.map((airline)=>(
    <AirlinesCard key={airline.id} airline={airline}/>
   ))

   }
   
    </>
)

}

AirlineCard.js

function AirlinesCard({airline}){ const{id,name,image,slogan,wlink}=airline; 返回（<>

{姓名}

{口號}

<Link to={ /airlines/${id} }>輸入

立即預訂門票！

 </> )

}

 Reviews.js

功能評論（{評論，setReviews}）{

useEffect(()=>{ fetch("/reviews") .then(res=>res.json()) .then(reviewData=>{ setReviews(reviewData) }) },[])

function handleAddReviews(newReview){ console.log("in handle add review", newReview) setReviews([...reviews,newReview]);

}

 const {id}=useParams(); console.log(reviews) let filteredReviews=reviews.filter(review=>{ return review.airline.id===parseInt(id)}) return( <> <h1>Reviews</h1> <Link to="/airlines"><button>Go Back</button></Link> <Link to={`/airlines/${id}/reviews/new`}><button>Add a Review</button></Link> { filteredReviews.map((review)=>{

返回 （ ）; })}

 </> )

}

 I have defined my link to go to add review form in the Reviews.js thanks here is the link [1]: https://i.stack.imgur.com/s6JMJ.png

Answer 1

您的路線看起來有錯字，應該是

<Route path="/airlines/:id/reviews/new" element={ <AddreviewForm />} />

代替

<Route path="/airlines/${id}/reviews/new" element={ <AddreviewForm />} />