使用React-Router，如何在不触发重新渲染的情况下更新URL？

Question

我有一个父组件，当URL与某个路径匹配时，它应该呈现另一个组件：

const View: React.SFC<Props> = ({
 ....
}) => {
  return (
    <div>
        ....
      <Route path={jobPath} component={JobPanel} />} />
    </div>
  );
};

如果jobPath === /careers/:id ，那么JobPanel.tsx将呈现。

JobPanel.tsx有一个链接，目前将返回this.props.history.push(/careers)

<BackLink
  to="/company/careers"
  onClick={(e: any) => { handleClose(); }}
>
  <StyledChevron orientation={Orientation.Left} />
  Go Back
</BackLink>

要么

<BackLink
  onClick={(e: any) => { this.props.history.push('/careers/); handleClose(); }}
>
  <StyledChevron orientation={Orientation.Left} />
  Go Back
</BackLink>

问题是JobPanel应该使用此Component进行页面内外的转换：

class JobPanel extends Component {

render() {
  const { isOpen, handleClose, job } = this.props;
      return (
        <StyledFlyout
          active={isOpen}

其中isOpen是redux存储中的布尔值。

虽然渲染JobPanel一切正常，但我相信每当URL发生变化时， react-router都会导致页面重新呈现。 我不完全确定如何不重新渲染。

Answer 1

使用render道具，而不是component的Route 。 例如：

<Route path={jobPath} render={({ history }) => (
    <JobPanel {...routeProps} />
)} />

来自https://reacttraining.com/react-router/web/api/Route/component ：

当您使用组件（而不是下面的render或children）时，路由器使用React.createElement从给定组件创建新的React元素。 这意味着如果为组件prop提供内联函数，则每次渲染都会创建一个新组件。 这导致现有组件卸载和新组件安装，而不是仅更新现有组件。 使用内联函数进行内联渲染时，请使用render或children prop（下面）。

有关使用渲染的更多详细信息，请参阅https://reacttraining.com/react-router/web/api/Route/render-func以获取更多详细信息。