Ссылка на компонент из того же компонента не работает

Question

У меня есть компонент, скажем, MyComponent, доступный по такому маршруту:

 <Route path="/myComponent/:id" exact component={MyComponent} />

Внутри MyComponent У меня есть:

 <Link to="/myComponent/2">2</Link>

То есть MyComponent ссылается на себя. Но эта ссылка не работает! Если я проверяю компонент React с помощью инструментов разработчика Chrome, то props.match соответствующим образом обновляется, но MyComponent не обрабатывается повторно, и конструктор не вызывается, так что состояние может быть соответствующим образом обновлено.

Минимальный пример: https://codesandbox.io/s/sharp-bouman-i1b0p?fontsize=14 - если вы перейдете на этот URL , то увидите, что ID 1 появится на отображаемом экране, но если вы нажмете на ссылку 2, экран не будетперерисовать, даже если URL обновляется. Если вы перейдете на этот URL , тогда идентификатор 2 будет отображаться как положено.

Answer 1

АААА! Это делает рендеринг без проблем. Это просто ваш state.id, который никогда не обновляется. Вы должны либо использовать свой реквизит как есть, либо поддерживать состояние в актуальном состоянии:

import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class MyComponent extends Component {
  constructor(props) {
    super(props);

    const {
      match: { params }
    } = this.props;

    this.state = {
      // This will only ever happen once !
      id: params.id
    };
  }
  // this will keep your state in sync with your props
  componentDidUpdate (lastProps) {
    if (lastProps.match.params.id !== this.props.match.params.id) {
      this.setState({ id: this.props.match.params.id }) 
    }
  }
  render() {
    // uncommenting the following line and deleting the next one will make your whole state useless
    // const { id } = this.props.match.params
    const { id } = this.state

    return (
      <div>
        <div>{id}</div>
        <Link to="/myComponent/2">2</Link>
      </div>
    );
  }
}

Answer 2

Если компонент уже смонтирован, маршрутизатор React повторно использует экземпляр компонента. Следовательно, конструктор или componentDidMount хуки не вызываются.

Это можно исправить, добавив componentDidUpdate:

componentDidUpdate(prevProps) {
  const { id } = this.props.match.params;
  if(id !== this.state.id) {
    this.setState({
      id
    });
  }
}

Codesandbox