如何在React Router 4组件内响应URL变化？

你的场景很典型——现在通过Route的render方法传递status props虽然能工作，但当用户直接修改地址栏、或者用浏览器前进后退切换URL时，组件需要自动感知这个变化并更新内部状态对吧？下面给你两种常用的解决方案，分别适配函数组件和类组件：

方案一：函数组件用useLocation + useEffect #

如果你用的是函数式组件，React Router提供的useLocation钩子可以直接获取当前路由信息，配合useEffect就能监听URL变化：

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

function SignUpAndRegister() {
  const location = useLocation();
  const [status, setStatus] = useState('');

  // 监听location.pathname的变化
  useEffect(() => {
    if (location.pathname === '/login') {
      setStatus('login');
    } else if (location.pathname === '/register') {
      setStatus('register');
    }
  }, [location.pathname]); // 依赖项设为pathname，只有它变化时才触发

  // 这里写你的组件逻辑，比如根据status渲染登录/注册表单
  return (
    <div>
      {status === 'login' ? <h1>登录</h1> : <h1>注册</h1>}
      {/* 表单内容... */}
    </div>
  );
}

同时，你的路由配置可以简化，不用再手动传递status props了：

<Router>
  <Switch>
    <Route path="/login" component={SignUpAndRegister} />
    <Route path="/register" component={SignUpAndRegister} />
  </Switch>
</Router>

方案二：类组件用withRouter高阶组件 #

如果你的组件是类组件，可以用withRouter把路由相关的props（包括location）注入到组件中，然后通过生命周期方法监听变化：

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

class SignUpAndRegister extends React.Component {
  state = {
    status: ''
  };

  componentDidMount() {
    // 组件挂载时初始化状态
    this.updateStatusFromPath(this.props.location.pathname);
  }

  componentDidUpdate(prevProps) {
    // 当URL变化时（即location.pathname改变）更新状态
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.updateStatusFromPath(this.props.location.pathname);
    }
  }

  updateStatusFromPath = (pathname) => {
    this.setState({
      status: pathname === '/login' ? 'login' : 'register'
    });
  };

  render() {
    return (
      <div>
        {this.state.status === 'login' ? <h1>登录</h1> : <h1>注册</h1>}
        {/* 表单内容... */}
      </div>
    );
  }
}

// 用withRouter包裹组件，注入路由props
export default withRouter(SignUpAndRegister);

对应的路由配置同样可以简化成上面的样子，不用传递status。

为什么要这么做？ #

这种方式让组件自己从URL中获取状态，而不是依赖父组件传递props，不仅降低了组件间的耦合度，还能完美处理用户直接修改地址栏、浏览器前进后退等场景——只要URL变化，组件就会自动更新状态，比原来的props传递方式更可靠。

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