Как передать идентификатор переменной с помощью history.pu sh ()

Question

Я использую библиотеку реактив-роутер для навигации и history.pu sh () для навигации по клику. Когда пользователь нажимает на строку, он переходит на «otherPage». В 'otherPage' я хочу использовать переменную 'id'. Как передать эту переменную?

function handleRowClick(id: number): void {
    // navigates user to another page
    history.push('/otherPage');
}

Answer 1

history.push(route, state);

Необязательный параметр state является объектом с вашими пользовательскими параметрами маршрутизации.

объект state доступен здесь внутри вашего компонента (если вы не можете обернуть его с помощью withRouter ho c)

this.props.location.state 

Компонент класса

Компонент высокого порядка

import { withRouter } from 'react-router';
/* other dependencies */

class YourClassComponent {
  render() {
    const { location } = this.props;
    console.log(location.state);

    return (
      /* some jsx here */ 
    );
  }
}

export default withRouter(YourClassComponent);

Функциональный компонент

Компонент высокого порядка

import { withRouter } from 'react-router';
/* other dependencies */

const YourFunctionalComponent = ({ location }) => {
  console.log(location.state);

  return (
    /* some jsx here */ 
  );
};

export withRouter(YourFunctionalComponent);

Реактивный крюк

import { useLocation } from 'react-router-dom';
/* other dependencies */

const YourFunctionalComponent = ({ location } ) => {
  const location = useLocation();
  console.log(location.state);

  return (
    /* some jsx here */ 
  );
};