React项目中如何修正搜索电影跳转URL路径错误

问题背景 #

开发电影网站时，搜索页面的电影卡片点击后，预期跳转到/movie/:id详情页，但实际跳转路径是/search/movie/:id，因该路由未绑定组件导致空白页。临时添加/search/movie/:id路由作为临时方案，现需修正跳转路径以移除临时路由。

解决方案 #

修改MovieCard组件中NavLink的to属性，使用绝对路径（添加开头的斜杠）：

function MovieCard(props){
  return(
    // 为路径添加开头斜杠，转为绝对路径
    <NavLink to={`/movie/${props.id}`} end>
      <div className="movie-card">
        <img src={props.imgLink} width='250px' height='300px' alt={props.title}/>
        <p>{props.title}</p>
        <p>{props.releaseDate}</p>
        <p>{props.rating}<img src="star-icon2.png" width='18px' height='18px'/></p>
        <button className="add-to-my-list-button">Add to my list</button>
      </div>
    </NavLink>
  )
}

原因说明 #

React Router中，to属性的值如果没有以斜杠开头，会被解析为相对当前页面路径的相对路径：

• 当你在/search页面点击卡片时，相对路径movie/${props.id}会拼接到当前路径后，得到/search/movie/${props.id}；
• 加上开头的斜杠后，路径会被解析为根路径起始的绝对路径，无论当前在哪个页面，都会直接跳转到/movie/${props.id}，匹配你已定义的/movie/:id路由。

修改后，即可安全移除临时添加的/search/movie/:id路由，保持路由配置的简洁性。

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