React Router问题：URL变更但视图未更新/组件未渲染求永久解决方案

我看到你被这个问题困扰已久，结合你提供的代码，咱们一步步找出问题并解决它，同时给你覆盖所有场景的永久方案：

先修复你代码里的几个致命错误 #

1. react-router-dom 导入拼写错误 #

你的App组件里写的是：

import { BrowserRouter as Router, Route, Switch } from "react-router dom";

这里的包名多了个空格！正确的包名是react-router-dom，这个错误会直接导致Router无法正常工作，修复后：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

2. PostItems中Link的动态路径写法错误 #

你在PostItems里的Link用了单引号包裹路径，这会导致模板字符串${_id}无法被解析：

<Link to='/post/${_id}' className='btn btn-primary'>

模板字符串必须用反引号`，修复后：

<Link to={`/post/${_id}`} className='btn btn-primary'>

这样才能生成正确的动态路径，比如/post/123。

3. 缺少帖子详情页的路由配置 #

你的App路由里没有定义/post/:id这个动态路由，Router不知道跳转到这个路径时该渲染哪个组件。假设你的帖子详情组件叫Post，在Switch里添加这个路由：

<Switch>
  // ... 其他已有的路由
  <PrivateRoute exact path='/posts' component={Posts} />
  <PrivateRoute exact path='/post/:id' component={Post} /> {/* 新增这一行 */}
  // ... 其他已有的路由
</Switch>

通用永久解决方案（覆盖所有可能的场景） #

如果上面的修复后还有问题，可能是以下原因，对应解决方法：

• 路由参数变化时组件没有重新获取数据
  如果你的帖子详情组件（比如Post）是通过useParams获取ID，但没有监听参数变化，组件挂载后不会自动更新。比如：

  import { useParams } from 'react-router-dom';
  import { useEffect, useState } from 'react';
  
  const Post = () => {
    const { id } = useParams();
    const [post, setPost] = useState(null);
  
    useEffect(() => {
      // 每次id变化时重新请求数据
      const fetchPost = async () => {
        const res = await fetch(`/api/posts/${id}`);
        const data = await res.json();
        setPost(data);
      };
      fetchPost();
    }, [id]); // 必须把id加入依赖数组
  
    if (!post) return <div>Loading...</div>;
    // ... 渲染帖子内容
  };
  

  一定要把路由参数id作为useEffect的依赖项，这样参数变化时才会重新执行数据获取逻辑。

• Switch路由顺序错误
  Switch会匹配第一个符合条件的路由，所以动态路由要放在具体路由的后面。比如不要把/post/:id放在/posts前面，否则/posts会被错误匹配成动态路由。

• Redux状态导致组件不更新
  如果你的组件依赖Redux状态，确保：

  • 使用useSelector时，选择器返回的是新的引用（比如不要直接返回数组/对象的原引用，必要时用createSelector缓存）
  • 如果用React.memo包裹组件，要确保props的浅比较能检测到变化
  • 状态更新时，不要修改原状态，要返回新的状态对象

• 强制组件重新挂载
  如果以上方法都无效，可以给路由组件添加唯一的key，用路由路径作为key，强制每次路径变化时组件重新挂载：

  <Route 
    exact path='/post/:id' 
    component={(props) => <Post key={props.location.pathname} {...props} />} 
  />
  

按照上面的步骤修复，应该就能彻底解决你遇到的URL变化但视图不更新的问题了。

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