React JS useHistory push 和 pass props

React JS是一种流行的JavaScript库，用于构建单页面应用程序。React Router 是一个流行的React JS路由库，允许您根据URL选择渲染不同的组件。在React Router中，useHistory钩子可用于在组件之间导航。

useHistory

useHistory钩子是React Router v5的一部分。它返回一个对象，该对象允许您在组件之间导航。

import { useHistory } from "react-router-dom";

function MyComponent() {
  const history = useHistory();

  function handleClick() {
    history.push("/new-route");
  }

  return (
    <button onClick={handleClick}>Go to new route</button>
  );
}

以上是一个示例代码，使用useHistory钩子将路由跳转到/new-route，当单击按钮时会触发handleClick函数。

Pass Props

您还可以将值传递给新的路由组件。React Router可以将这些值作为组件的prop传递。以下是一个示例，该示例将从当前路由组件中的myValue prop传递给新的路由组件。

import { useHistory } from "react-router-dom";

function MyComponent() {
  const history = useHistory();

  function handleClick() {
    history.push({
      pathname: "/new-route",
      state: { myValue: "Hello, new route!" }
    });
  }

  return (
    <button onClick={handleClick}>Go to new route</button>
  );
}

handleClick函数将路由跳转到/new-route，并将myValue传递为state属性。在新的路由组件中，您可以很容易地通过props.location.state.myValue来访问该值。

function NewRoute(props) {
  const myValue = props.location.state.myValue;

  return (
    <div>{myValue}</div>
  );
}

如上所述，将myValue作为prop传递给新的路由组件。

结论

React Router提供了许多方便的方法来导航到特定的路由，并且非常容易通过属性将值传递给新的路由组件。 useHistory钩子对于实现许多导航和路由行为非常有用。