React Router中如何固定导航到指定路由而非基于当前URL拼接？

• 问题根源：当使用useNavigate传入相对路径（不以/开头）时，React Router会基于当前所在路由的路径进行拼接，所以在/bookmarks路由下点击时，会生成/bookmarks/:storyId这样的错误路径。

• 解决方法：使用绝对路径构造目标地址，确保导航从根路径开始解析：

  直接在navigate中传入以/开头的完整路径，示例代码如下：

  import { useNavigate } from 'react-router-dom';
  
  const StoryItem = ({ storyId }) => {
    const navigate = useNavigate();
  
    const handleViewDetail = () => {
      // 绝对路径直接指向stories下的详情页，不受当前路由影响
      navigate(`/stories/${storyId}`);
    };
  
    return (
      <div onClick={handleViewDetail} style={{ cursor: 'pointer' }}>
        {/* 展示故事标题/内容 */}
      </div>
    );
  };
  
  export default StoryItem;
  

• 优化建议：如果项目中有多处用到路由路径，可以将路径抽成常量，避免硬编码，方便后续维护：

  // 定义路由常量文件，比如src/constants/routes.js
  export const ROUTES = {
    STORIES: '/stories',
    STORY_DETAIL: (id) => `/stories/${id}`
  };
  
  // 在组件中使用
  import { ROUTES } from '../constants/routes';
  
  // ...
  const handleViewDetail = () => {
    navigate(ROUTES.STORY_DETAIL(storyId));
  };
  

这样不管你的StoryItem组件在/bookmarks还是其他任何路由下渲染，点击后都会正确跳转到/stories/:storyId路径。

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