React类组件如何获取history、location、match及路由传递的Home组件属性？

一、获取history、location、match属性 #

React Router提供两种常用方式让类组件拿到这些路由核心属性：

1. 直接通过路由组件的props接收 #

如果你的Home组件是直接被<Route>组件通过component属性渲染的，路由会自动把history、location、match这三个属性注入到组件的props中：

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

class Home extends React.Component {
  render() {
    // 从props中解构路由属性
    const { history, location, match } = this.props;
    
    // 示例：跳转到/about页面
    const goToAbout = () => history.push('/about');
    
    return (
      <div>
        <h1>Home Page</h1>
        <p>当前路径：{location.pathname}</p>
        <p>路由匹配参数：{JSON.stringify(match.params)}</p>
        <button onClick={goToAbout}>去关于页</button>
      </div>
    );
  }
}

// 路由配置中直接用component渲染Home
function App() {
  return (
    <div>
      <Route path="/home" component={Home} />
    </div>
  );
}

2. 使用withRouter高阶组件注入属性 #

如果Home组件不是直接被<Route>渲染（比如嵌套在其他普通组件里），可以用withRouter高阶组件包裹它，强制注入路由属性：

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

class Home extends React.Component {
  render() {
    const { history, location, match } = this.props;
    return (
      <div>
        <h1>Home Page</h1>
        <p>当前路径：{location.pathname}</p>
      </div>
    );
  }
}

// 用withRouter包裹Home组件
const HomeWithRouter = withRouter(Home);

// 此时即使HomeWithRouter不是直接被Route渲染，也能拿到路由属性
function App() {
  return (
    <div>
      <Route path="/home">
        <HomeWithRouter />
      </Route>
    </div>
  );
}

二、获取路由传递给Home的自定义Props #

如果需要给Home组件传递额外的自定义属性，可通过<Route>的render或children属性实现：

1. 通过render属性传递 #

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

class Home extends React.Component {
  render() {
    // 同时拿到路由属性和自定义属性
    const { history, userName } = this.props;
    return (
      <div>
        <h1>欢迎{userName}来到Home页</h1>
        <button onClick={() => history.push('/')}>返回首页</button>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <Route 
        path="/home" 
        render={(routeProps) => <Home {...routeProps} userName="张三" />} 
      />
    </div>
  );
}

这里的routeProps是路由自动提供的history、location、match，通过展开运算符...routeProps传递给Home，再追加自定义的userName属性。

2. 通过children属性传递（适合路由不匹配时也渲染的场景） #

<Route path="/home">
  {(routeProps) => <Home {...routeProps} age={25} />}
</Route>

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