React路由匹配时componentWillMount方法未触发问题咨询

嘿，我之前也踩过一模一样的坑！咱们先捋清楚为啥SidebarContentWrap的componentWillMount没被触发：

当路由从/playlist/slug1切换到/playlist/slug2时，React Router并不会卸载再重新挂载SidebarContentWrap组件，只是更新它的props（比如match.params.slug）。而componentWillMount只在组件第一次挂载时执行一次，后续参数变化不会再触发这个钩子——而且得提醒你，componentWillMount已经被React标记为不安全的生命周期了，官方更推荐用componentDidMount替代哦。

下面给你几个可行的解决方案：

方案一：用componentDidUpdate监听参数变化 #

如果你的组件还是类组件，可以在componentDidUpdate里对比前后的路由参数，变化时重新获取数据：

class SidebarContentWrap extends React.Component {
  componentDidMount() {
    // 第一次挂载时获取数据
    this.fetchPlaylistData(this.props.match.params.slug);
  }

  componentDidUpdate(prevProps) {
    // 对比前后slug，变化就重新请求
    if (this.props.match.params.slug !== prevProps.match.params.slug) {
      this.fetchPlaylistData(this.props.match.params.slug);
    }
  }

  fetchPlaylistData = (slug) => {
    // 这里写你的API请求逻辑
    fetch(`/api/playlist/${slug}`)
      .then(res => res.json())
      .then(data => {
        // 更新组件状态
        this.setState({ playlist: data });
      });
  }

  render() {
    // 渲染逻辑
    return <div>{/* ... */}</div>;
  }
}

方案二：用React Hooks监听参数（函数组件推荐） #

如果你的组件是函数组件，用useParams获取路由参数，再配合useEffect监听参数变化：

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function SidebarContentWrap() {
  const { slug } = useParams();
  const [playlist, setPlaylist] = useState(null);

  useEffect(() => {
    // 每次slug变化时执行请求
    const fetchPlaylistData = async () => {
      const res = await fetch(`/api/playlist/${slug}`);
      const data = await res.json();
      setPlaylist(data);
    };

    fetchPlaylistData();
  }, [slug]); // 依赖项设为slug，变化时重新运行effect

  if (!playlist) return <div>Loading...</div>;

  return <div>{/* 渲染playlist内容 */}</div>;
}

方案三：给组件加key强制重新挂载 #

如果非要让组件在参数变化时重新挂载（从而触发挂载阶段的生命周期钩子），可以给Route的渲染组件加一个基于slug的key：

// 在App.js里修改Route的写法
<Route 
  path="/playlist/:slug" 
  render={(props) => (
    <SidebarContentWrap 
      key={props.match.params.slug} 
      {...props} 
    />
  )} 
/>

这样每次slug变化，key就会改变，React会认为这是一个新组件，卸载旧的并挂载新的，自然就会触发挂载阶段的生命周期钩子了。

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