React路由报No routes matched location错误如何排查解决

问题现象 #

开发航司点评功能时触发路由匹配异常：点击按钮跳转至指定航司新增评论路径/airlines/1/reviews/new时，控制台抛出错误：

react_devtools_backend.js:4026 No routes matched location "/airlines/1/reviews/new"

项目路由规则统一在App.js中定义，跳转新增评论表单的<Link>组件写在Reviews.js页面内，涉及核心文件包括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>

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(
<>

<h2>{name}</h2>
<h4>{slogan}</h4>
<Link to={`/airlines/${id}`}>Enter
<h3 >Book your tickets now!</h3>
</Link>
</>
)
}

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 (

);
})}

    </>
)
}

故障原因 #

路由规则定义存在语法错误：

• App.js中新增评论页的路由路径使用普通双引号包裹，内部的${id}不会做变量插值，实际注册的路由是字面量路径/airlines/${id}/reviews/new，和实际跳转的动态路径完全不匹配
• 即使将双引号改为模板字符串反引号，App.js顶层路由定义作用域内也不存在id变量，会直接触发引用错误。React Router 的动态路由参数必须使用:参数名的占位符语法定义，和已有的/airlines/:id路由规则写法一致。

修复方案 #

修改App.js中新增评论页的路由定义，将错误的路径写法替换为标准动态路由占位符写法：

{/* 替换原有错误的Route定义 */}
<Route exact path="/airlines/:id/reviews/new" element={ <AddreviewForm />} />

修改后路由即可正常匹配跳转，在AddreviewForm组件内可以通过useParams() Hook 获取路径上的航司id参数。

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