Как с помощью React-Router обновить URL-адрес без повторного рендеринга?

Question

У меня есть родительский компонент, который должен отображать другой компонент, когда URL соответствует определенному пути:

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

JobPanel.tsx будет отображаться, если jobPath === /careers/:id, что все работает.

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 должен иметь переход в и изстраница с этим компонентом:

class JobPanel extends Component {

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

Где isOpen - логическое значение в хранилище с избыточностью.

При рендеринге JobPanel все работает, я считаю, react-router вызывает повторную визуализацию страницы при изменении URL-адреса.Я не совсем уверен, как добиться повторного рендеринга.

Answer 1

Используйте render опору вместо component в Route. например:

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

С https://reacttraining.com/react-router/web/api/Route/component:

Когда вы используете компонент (вместо рендера или потомка, ниже), маршрутизатор использует React.createElement для создания нового элемента React из данного компонента. Это означает, что если вы предоставите встроенную функцию для компонента prop, вы будете создавать новый компонент при каждом рендеринге. Это приводит к размонтированию существующего компонента и монтированию нового компонента вместо простого обновления существующего компонента. При использовании встроенной функции для встроенного рендеринга используйте рендер или дочернюю опору (ниже).

Подробнее об использовании рендера см. https://reacttraining.com/react-router/web/api/Route/render-func для более подробной информации.