[英]Why is this react route throwing an error of no route matched location?
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我在我的代码中遇到了一些与路由相关的问题,我收到错误“react_devtools_backend.js:4026 No routes match location”/airlines/1/reviews/new”。那是我试图对特定航空公司进行评论时。这里是我的代码我有 App.js-Airlines.js-AirlineCard.js-Reviews.js-AddReviewForm
App.js.My route is defined here 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
function Airlines(){ const[airlines,setAirlines]=useState([]);函数航空公司(){ 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; function AirlinesCard({airline}){ const{id,name,image,slogan,wlink}=airline; return( <>
返回(<>
/airlines/${id}
}>Enter
/airlines/${id}
}>输入
</> )
} }
Reviews.js
function Reviews({reviews,setReviews}){功能评论({评论,setReviews}){
useEffect(()=>{ fetch("/reviews") .then(res=>res.json()) .then(reviewData=>{ setReviews(reviewData) }) },[]) useEffect(()=>{ fetch("/reviews") .then(res=>res.json()) .then(reviewData=>{ setReviews(reviewData) }) },[])
function handleAddReviews(newReview){ console.log("in handle add review", newReview) setReviews([...reviews,newReview]); 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
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 />} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.