Why is this react route throwing an error of no route matched location?

Question

I have some problem related to routing in my code im getting error "react_devtools_backend.js:4026 No routes matched location "/airlines/1/reviews/new" .That is when im trying to give a review to a particular airline. here is my code I have App.js-Airlines.js-AirlineCard.js-Reviews.js-AddReviewForm

App.js.My route is defined here

 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

function Airlines(){ 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; return( <>

{name}

{slogan}

<Link to={ /airlines/${id} }>Enter

Book your tickets now!

 </> )

}

 Reviews.js

function Reviews({reviews,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)=>{

return ( ); })}

 </> )

}

 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

Your route looks like it's got a typo, should be

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

instead of

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