通过 react-router 将 props 传递到新页面 Link

Question

当我在使用 react-router-dom 时单击 link 时，我试图将道具 courseid 传递到新页面，但我似乎无法访问它。我尝试了不同的方法，但 none 让我在新页面 courseid 上访问

在 courseListItem 中，我可以访问 props.course.id 我有一个按钮可以将我带到“/holes”

<Link
                        to={{
                          pathname: `/holes`, state: {courseid: props.course.id}
                          }} >
                          <button  
                            className="btn btn-primary tooltips float-left" 
                            data-placement="left" 
                            data-toggle="tooltip" 
                            data-original-title="view"
                            ><i 
                            className="fa fa-edit">

                            </i> 
                          </button>
                      </Link>

根据我的阅读，我可以使用 state: {courseid: props.course.id} 将 courseid 传递到新页面，然后在新页面上使用 location.state.courseid 访问 courseid。

在新页面上使用location.state.courseid给我一个错误unexpected use of location

我发现 post 说使用 window.location.state.courseid 这消除了错误但是当我尝试单击按钮转到 /holes 时，我得到另一个错误 Uncaught TypeError: Cannot read properties of undefined (reading 'courseid')所以显然找不到 courseid

有人能解释一下我错在哪里吗？或者将 courseid 传递到新页面的最佳方法是什么。

courseid 是 course 对象的一部分，/holes 是一个上面有表单的页面，但我只需要 id，这样当我提交表单时，它可以发送post 请求将表格中输入的洞保存到正确课程的 ID。

Answer 1

您应该使用 useLocation() hook 以获得保存状态的 location 变量。

如果您使用 Class 组件，location variable 将以不同的方式提供，具体取决于您如何实例化 <Route {...}/> 的

路由组件为 this.props.location
路线渲染为({ location }) => ()
路由 children 作为 ({ location }) => ()
withRouter as this.props.location

Answer 2

你的组件是什么类型 functional component 或 class component 如果你在功能组件上写你可以使用 useLocation hooks 来自 react-router-dom 如果你使用 class component 你应该使用组件中的 location 道具。

也许您的组件是这样的，它只是使用 useLocation

在位置上访问 state 的示例

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

const Holes = () => {
  const location = useLocation();

  return (
    <div>
      <h1>HOLES</h1>
      <h2>{location.state.courseid}</h2>
    </div>
  );
};

export default Holes;

通过 react-router 将 props 传递到新页面 Link

pass props to new page via react-router Link

reactjs

react-router

react-props