Реактивный маршрутизатор реагирует на изменения в URL

Question

Я знаю, что вы можете получить доступ к идентификатору params в URL, используя this.props.match.params. Мой вопрос: как вы воспринимаете изменения, которыми пользователь мог манипулировать в URL? Пример: исходный URL, переданный от маршрутизатора в реквизитах http://localhost:3000/user/3456653/newPage

Пользователь заполняет страницу и портит идентификатор URL-адреса. Пример: http://localhost:3000/user/888888/newPage

Есть ли способ проверить, совпадают ли параметры, перед тем, как сделать вызов API для сохранения данных? Я использую «response-router-dom»: «4.2.2»

Answer 1

Вы можете сравнить свои параметры в componentDidUpdate хуке компонента, переданного вашему Route, чтобы узнать, когда он изменился.

Пример ( CodeSandbox )

class MyComponent extends Component {
  componentDidUpdate(prevProps) {
    const prevPathParameter = prevProps.match.params.pathParameter;
    const newPathParameter = this.props.match.params.pathParameter;

    if (prevPathParameter !== newPathParameter) {
      console.log("pathParameter changed!");
    }
  }

  render() {
    return <h1> {this.props.match.params.pathParameter}</h1>;
  }
}

function App() {
  return (
    <Router>
      <div>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
        <Route path="/:pathParameter" component={MyComponent} />
      </div>
    </Router>
  );
}