React Router链接失效问题：URL变化但页面内容不显示

Hey，我之前也踩过这个一模一样的坑！URL变了页面却纹丝不动，大概率是下面几个常见原因，咱们一个个来排查解决：

1. 路由匹配顺序或exact属性缺失 #

如果你的路由配置里，宽泛的路径（比如/）放在了更具体的路径（比如/about）前面，而且没加exact属性，就会导致不管URL怎么变，第一个匹配的路由组件一直渲染。

举个例子，你的Switch里如果是这么写的：

<Switch>
  <Route path="/" component={Content} />
  <Route path="/about" component={About} />
</Switch>

那访问/about时，/也会被匹配到，所以Content组件会一直显示，About根本不会渲染。解决方法就是给首页路由加上exact属性：

<Switch>
  <Route exact path="/" component={Content} />
  <Route path="/about" component={About} />
</Switch>

2. 组件没有监听路由变化 #

如果你的路由组件（比如Content、About）是类组件，而且依赖路由参数或者需要在路由变化时更新内容，可能没有监听location的变化。这时候需要用withRouter高阶组件包裹组件，然后在componentDidUpdate里检测路由变化：

import React from 'react';
import { withRouter } from 'react-router-dom';

class Content extends React.Component {
  componentDidUpdate(prevProps) {
    // 当路由变化时，执行更新逻辑
    if (this.props.location !== prevProps.location) {
      // 比如重新加载数据、更新组件状态
      this.fetchData();
    }
  }

  fetchData() {
    // 你的数据获取逻辑
  }

  render() {
    return <div>...</div>;
  }
}

// 用withRouter包裹，让组件能拿到location等路由props
export default withRouter(Content);

如果是函数组件，就用useLocation钩子配合useEffect来监听：

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function Content() {
  const location = useLocation();

  useEffect(() => {
    // 路由变化时触发这里的逻辑
    console.log('路由变了！', location.pathname);
    // 比如重新请求数据
    fetchData();
  }, [location]); // 把location作为依赖，变化时重新执行

  const fetchData = () => {
    // 数据获取逻辑
  };

  return <div>...</div>;
}

export default Content;

3. 组件被不必要的缓存导致不更新 #

如果你给路由组件用了React.memo或者其他缓存手段，但没有正确设置依赖项，就会导致路由变化时组件不会重新渲染。这时候要检查React.memo的比较函数，确保当location或者路由相关props变化时，组件能重新渲染：

import React, { memo } from 'react';
import { useLocation } from 'react-router-dom';

const Content = memo(() => {
  const location = useLocation();
  return <div>当前路径：{location.pathname}</div>;
}, (prevProps, nextProps) => {
  // 不要忽略location的变化！
  return prevProps.location === nextProps.location;
});

// 或者直接把location作为依赖，不要手动写比较函数

4. 确认Router包裹范围正确 #

最后再检查一下，你的整个应用是不是被BrowserRouter（也就是你代码里的Router）完整包裹了。正确的写法应该是在render里把所有路由相关的组件都放在Router内部：

render(
  <Router>
    <Header /> {/* Header里的Link要在Router内部才生效 */}
    <Switch>
      <Route exact path="/" component={Content} />
      <Route path="/about" component={About} />
    </Switch>
    <Footer />
  </Router>,
  document.getElementById('root')
);

你可以先从检查exact属性和路由顺序开始，这是最常见的原因！如果还不行，再看看组件有没有监听路由变化。

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