如何使用 history.push() 传递变量 id

Question

我正在使用 react-router 库进行导航，并使用 history.push() 来导航 onClick。当用户点击一行时，他们将被导航到“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 hoc 包装它）

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 */ 
  );
};