Реагировать componentDidUpdate не изменяя props.match.params на изменение URL?

Question

Match.params не обновляется в componentDidUpdate().

Мой маршрут /sidebar/:id, если из sidebar/1 я перехожу к sidebar/2, то this.props.match.params.id все еще показывает id как 1, а не обновленный URL id 2 в componentDidUpdate()

Пробовал с props.location, но все еще показывает данные старого URL.

Компонент страницы боковой панели

 componentDidMount () {
    const id  = this.props.match.params.id;
    //fetching some data
}
componentDidUpdate(prevProps) {

    console.log("Prevprops",prevProps.match.params.id);
    console.log("Cuurent id",this.props.match.params.id);
    //if both ids not same then fetch data again
}

Маршрутизатор

const routes = [
  {
    path: "sidebar/:id",
    component: asyncComponent(() => import('../sidebarPage')),
  },
];
class AppRouter extends Component {
  render() {
    const { url } = this.props;
 return (
      <div>
        {routes.map(singleRoute => {
          const { path, exact, ...otherProps } = singleRoute;
          return (
            <Route
              exact={exact === false ? false : true}
              key={singleRoute.path}
              path={`${url}/${singleRoute.path}`}
           />
          );

        })}
      </div>
    );
  }
}

Асинхронный компонент

import React, { Component } from 'react';
import Nprogress from 'nprogress';
import ReactPlaceholder from 'react-placeholder';
import 'nprogress/nprogress.css';
import 'react-placeholder/lib/reactPlaceholder.css';

export default function asyncComponent(importComponent) {
  class AsyncFunc extends Component {
    constructor(props) {
      super(props);
      this.state = {
        component: null
      };
    }
    componentWillMount() {
      Nprogress.start();
    }
    componentWillUnmount() {
      this.mounted = false;
    }
    async componentDidMount() {
      this.mounted = true;
      const { default: Component } = await importComponent();
      Nprogress.done();
      if (this.mounted) {
        this.setState({
          component: <Component {...this.props} />
        });
      }
    }

    render() {
      const Component = this.state.component || <div />;
      return (
        <ReactPlaceholder type="text" rows={7} ready={Component !== null}>
          {Component}
        </ReactPlaceholder>
      );
    }
  }
  return AsyncFunc;
}

Я ожидаю, когда перейду с sidebar/1 на sidebar/2 в componentDidUpdate this.props.match.params.id показывает 2 и prevProps показывает 1.

Answer 1

Ваш asyncComponent использует только начальный props и не реагирует на изменения.

Попробуйте этот код:

async componentDidMount() {
  this.mounted = true;
  const { default: Component } = await importComponent();
  Nprogress.done();
  if (this.mounted) {
    this.setState({
      component: Component
    });
  }
}

render() {
  const Component = this.state.component;
  return (
    <ReactPlaceholder type="text" rows={7} ready={Component !== null}>
      {Component ? <Component {...this.props}/> : <div/>}
    </ReactPlaceholder>
  );
}