简述React-Router 4怎样在路由变化时重新渲染同⼀个组件 ？

在 React-Router 4 中，如果你希望路由变化时重新渲染同一个组件，你可以使用 componentWillReceiveProps 生命周期方法或 componentDidUpdate 生命周期方法。这是因为当路由变化时，React-Router 会将新的 match、location 和 history 属性传递给 <Route> 组件的子组件。

以下是一个使用 componentWillReceiveProps 的示例：

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

class MyComponent extends React.Component<RouteComponentProps> {
  componentWillReceiveProps(nextProps) {
    if (this.props.location !== nextProps.location) {
      // 当路由变化时，执行你的逻辑
      console.log('路由变化了！');
    }
  }

  render() {
    // 渲染你的组件
    return <div>我的组件</div>;
  }
}

export default MyComponent;

或者，你也可以使用 componentDidUpdate 生命周期方法：

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

class MyComponent extends React.Component<RouteComponentProps> {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      // 当路由变化时，执行你的逻辑
      console.log('路由变化了！');
    }
  }

  render() {
    // 渲染你的组件
    return <div>我的组件</div>;
  }
}

export default MyComponent;

这两种方法都可以帮助你在路由变化时重新渲染同一个组件，并执行一些特定的逻辑。注意，componentWillReceiveProps 已经在 React 16.3 版本中被废弃，并在 React 17.0 版本中被移除，所以推荐使用 componentDidUpdate。

另外，如果你只是希望组件在路由变化时重新渲染，而不执行任何特定的逻辑，那么你可以省略这两个生命周期方法，React-Router 会自动处理组件的重新渲染。