React路由跳转重置组件初始状态及父子组件状态控制问询

嘿，这个场景我太熟悉了！React Router默认会复用同一路由的组件实例——也就是说，当你已经在/app页面时，再点击Navbar里的同个链接，组件不会重新挂载，自然也就不会回到初始的neutral状态。下面给你几个实用的解决办法，按需选择就行：

方法1：在子组件内监听路由变化（最推荐，无URL污染） #

不管你是用类组件还是函数组件，都可以通过监听路由的location变化来触发状态重置，即使是点击同一个导航链接也能生效。

如果HowYouFeel是类组件： #

首先用withRouter高阶组件包裹组件，拿到路由的location props，然后在componentDidUpdate里判断路由变化：

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

class HowYouFeel extends Component {
  state = {
    mood: 'neutral'
  };

  // 监听路由变化，重置状态
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.setState({ mood: 'neutral' });
    }
  }

  // 你的状态切换逻辑（比如点击按钮改mood）
  handleMoodChange = (newMood) => {
    this.setState({ mood: newMood });
  };

  render() {
    // 根据mood渲染对应子组件的逻辑
    return (
      <div>
        {this.state.mood === 'neutral' && <Neutral onMoodChange={this.handleMoodChange} />}
        {this.state.mood === 'happy' && <Happy onMoodChange={this.handleMoodChange} />}
      </div>
    );
  }
}

// 用withRouter包裹，让组件能拿到location props
export default withRouter(HowYouFeel);

如果HowYouFeel是函数组件： #

用useLocation钩子获取路由信息，再配合useEffect监听变化：

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

function HowYouFeel() {
  const [mood, setMood] = useState('neutral');
  const location = useLocation();

  // 每次location变化，重置状态
  useEffect(() => {
    setMood('neutral');
  }, [location]);

  // 状态切换逻辑
  const handleMoodChange = (newMood) => {
    setMood(newMood);
  };

  return (
    <div>
      {mood === 'neutral' && <Neutral onMoodChange={handleMoodChange} />}
      {mood === 'happy' && <Happy onMoodChange={handleMoodChange} />}
    </div>
  );
}

export default HowYouFeel;

方法2：给Route添加动态key（简单粗暴） #

通过给Route组件添加唯一的key，强制React每次路由切换时重新创建组件实例，这样组件就会自动回到初始状态。不过要注意：如果是点击同一个导航链接，默认pathname不变，所以key不会触发变化——这时候可以给导航点击事件加个小技巧，或者用location的完整信息当key（包括search、hash）：

修改App.js里的Route：

// 先给App组件用withRouter包裹，拿到location props
import { BrowserRouter, Switch, Route, withRouter } from 'react-router-dom';

class App extends Component {
  render() {
    const { location } = this.props;
    return (
      <div className="App">
        <Navbar />
        <Switch>
          <Route exact path='/' component={AboutThis} />
          <Route path='/contact' component={ContactMe} />
          {/* 用完整的location作为key，强制组件重新渲染 */}
          <Route path='/app' component={HowYouFeel} key={location.key} />
        </Switch>
      </div>
    );
  }
}

export default withRouter(App);

方法3：把状态提升到父组件（适合多组件联动场景） #

如果后续有多个组件需要类似的重置逻辑，可以把状态放到根组件App里，通过props传递给子组件，同时在Navbar的点击事件里触发状态重置：

第一步：修改App.js，管理状态并传递方法 #

class App extends Component {
  state = {
    howYouFeelMood: 'neutral'
  };

  // 重置状态的方法
  resetHowYouFeel = () => {
    this.setState({ howYouFeelMood: 'neutral' });
  };

  // 更新状态的方法
  updateHowYouFeelMood = (newMood) => {
    this.setState({ howYouFeelMood: newMood });
  };

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          {/* 把重置方法传递给Navbar */}
          <Navbar resetHowYouFeel={this.resetHowYouFeel} />
          <Switch>
            <Route exact path='/' component={AboutThis} />
            <Route path='/contact' component={ContactMe} />
            {/* 用render prop传递状态和更新方法给HowYouFeel */}
            <Route path='/app' render={(props) => (
              <HowYouFeel
                {...props}
                mood={this.state.howYouFeelMood}
                updateMood={this.updateHowYouFeelMood}
              />
            )} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

第二步：修改Navbar，点击时触发重置 #

const Navbar = ({ resetHowYouFeel }) => {
  return (
    <nav className="nav-wrapper blue">
      <div className="container">
        <Link to="/" className="brand-logo">How are you?</Link>
        <ul className="right">
          <li><NavLink to="/">About</NavLink></li>
          {/* 点击导航时触发重置方法 */}
          <li>
            <NavLink to='/app' onClick={resetHowYouFeel}>How was your day?</NavLink>
          </li>
          <li><NavLink to='/contact'>Contact</NavLink></li>
        </ul>
      </div>
    </nav>
  );
};

第三步：修改HowYouFeel，使用父组件传递的状态 #

// 类组件版本
class HowYouFeel extends Component {
  render() {
    const { mood, updateMood } = this.props;
    return (
      <div>
        {mood === 'neutral' && <Neutral onMoodChange={() => updateMood('happy')} />}
        {mood === 'happy' && <Happy onMoodChange={() => updateMood('neutral')} />}
      </div>
    );
  }
}

// 函数组件版本
function HowYouFeel({ mood, updateMood }) {
  return (
    <div>
      {mood === 'neutral' && <Neutral onMoodChange={() => updateMood('happy')} />}
      {mood === 'happy' && <Happy onMoodChange={() => updateMood('neutral')} />}
    </div>
  );
}

以上几种方法都能解决你的问题，个人最推荐方法1，不需要修改太多代码，也不会影响URL或其他组件的逻辑。

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