如何解决React Router模糊匹配页面切换时加载屏不显示问题？

问题描述 #

我在React项目中实现页面切换加载屏时遇到了一个问题：从首页/切换到其他页面（比如/page-1）时，加载屏能正常显示；但从/page-1直接切换到/page-2这类模糊匹配的页面时，虽然在Page组件的constructor里设置了setTimeout来切换loading状态，加载屏却不显示，只有先切回首页再切换目标页面才生效。

我的组件代码如下：

App Component

function App() { 
  const links = ["page-1", "page-2", "page-3"].map(item => { 
    return ( 
      <Link key={item} to={"/" + item}> 
        {item} 
      </Link> 
    ); 
  }); 
  return ( 
    <BrowserRouter> 
      <> 
        <nav> 
          <Link to="/">Home</Link> 
          {links} 
        </nav> 
        <div className="app"> 
          <Switch> 
            <Route exact path="/" component={Home} /> 
            <Route path="/:pagename" component={Page} /> 
          </Switch> 
        </div> 
      </> 
    </BrowserRouter> 
  ); 
}

Page Component

class Page extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { loading: true }; 
    setTimeout(() => { 
      this.setState({ loading: false }); 
    }, 500); 
  } 
  render() { 
    return this.state.loading ? ( 
      <h1>Loading...</h1> 
    ) : ( 
      <h1>{this.props.match.params.pagename}</h1> 
    ); 
  }
}

问题根源 #

这是因为React Router在匹配到同一个组件（这里的Page组件）时，会复用已有的组件实例，而不是重新创建一个新的实例。也就是说，从/page-1切换到/page-2时，Page组件的constructor不会再次执行，loading状态也不会被重置为true，自然就看不到加载屏了。

解决方案 #

下面提供几种可行的解决方法，你可以根据自己的项目情况选择：

方案1：使用componentDidUpdate监听路由参数变化

对于类组件，我们可以在componentDidUpdate钩子中检测路由参数的变化，当pagename改变时，重置loading状态并重新触发定时器：

class Page extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { loading: true }; 
    this.timer = null;
  } 

  componentDidMount() {
    // 首次挂载时设置定时器
    this.timer = setTimeout(() => { 
      this.setState({ loading: false }); 
    }, 500);
  }

  componentDidUpdate(prevProps) {
    // 检测路由参数pagename是否变化
    if (this.props.match.params.pagename !== prevProps.match.params.pagename) {
      // 重置loading状态
      this.setState({ loading: true });
      // 清除之前的定时器（避免内存泄漏）
      if (this.timer) clearTimeout(this.timer);
      // 重新设置定时器
      this.timer = setTimeout(() => { 
        this.setState({ loading: false }); 
      }, 500);
    }
  }

  componentWillUnmount() {
    // 组件卸载时清除定时器
    if (this.timer) clearTimeout(this.timer);
  }

  render() { 
    return this.state.loading ? ( 
      <h1>Loading...</h1> 
    ) : ( 
      <h1>{this.props.match.params.pagename}</h1> 
    ); 
  }
}

方案2：转为函数组件，使用useEffect钩子

如果你的项目允许使用函数组件，用useEffect监听路由参数的变化会更简洁：

import { useParams } from 'react-router-dom';

function Page() {
  const { pagename } = useParams();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 每次pagename变化时，重置loading并启动定时器
    setLoading(true);
    const timer = setTimeout(() => {
      setLoading(false);
    }, 500);

    // 清除定时器的清理函数
    return () => clearTimeout(timer);
  }, [pagename]); // 依赖项为pagename，参数变化时重新执行

  return loading ? <h1>Loading...</h1> : <h1>{pagename}</h1>;
}

方案3：给Route添加key强制重新渲染组件

如果你不想修改组件内部逻辑，可以在Route上添加key属性，让React Router每次路由变化时都创建新的组件实例：

// 在App组件的Switch中修改Route
<Switch> 
  <Route exact path="/" component={Home} /> 
  <Route path="/:pagename" key={window.location.pathname} component={Page} /> 
</Switch>

不过这种方法会完全卸载并重新挂载组件，可能会带来一些性能开销，适合简单场景使用。

总结 #

推荐优先使用方案1（类组件）或方案2（函数组件），它们能更精准地控制组件状态，避免不必要的组件卸载/挂载。方案3虽然简单，但不够优雅，适合快速测试或小型项目。

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