如何在 react router v6 中使用 withRouter 来传递道具？

Question

以前，你需要像这样包装一些东西export default withRouter(name of component) ，现在它在 react-router v6 中有所不同。

我有这个按钮，一旦你点击它，它就会带你到另一个页面，包括我的 tableMeta.rowData[0] 中的值。我尝试使用 navigate = useNavigate()，但我不知道如何传递 tableMeta.rowData[0]

的值

   {
      name: "Edit",
      options: {
        customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <Button
              color="success"
               onClick={
            () => navigate("/edit-products")
            // console.log(tableMeta.rowData[0])
          }
            >
              Edit
            </Button>
          );
        },
      },
    },

在 React-router v6 中，我怎样才能像之前的 withRouter 那样做呢？

Answer 1

已弃用。您可以使用钩子版本重新创建它：

import {
  useLocation,
  useNavigate,
  useParams
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

更多详情check this out

如何在 react router v6 中使用 withRouter 来传递道具？

How can I use withRouter in react router v6 for passing props?

javascript

reactjs

react-router-dom