来自链接输入状态的未定义值 [英] Undefined value from Link input state

问题描述

我目前正在尝试通过 React-Router-DOM 的 Link 组件将一些信息传递给我尝试过的另一个组件:

导出默认函数 Test() {返回(<div><Link to={{ pathname: './NewPage', state: { testValue: true }}}>New Page</Link>

)}

导出默认函数 NewPage(props) {console.log(props.location.state)返回(<div>{props.location.state}

)}

错误说:无法在 console.log(props.location.state) 行读取未定义的属性状态"

注意:我使用的是 React Hooks 而不是类

解决方案

路由道具 react-router 允许您使用的必须以某种方式传递到您的组件中.有几种模式可以实现这一点，一个 HOC(withRouter)，钩子，或者通过 Route 直接将它们传递给 component 属性.

注意您如何实例化 NextPage 组件

<路由精确路径='/NewPage' component={() =><NewPage/>}/>

没有道具.

component 道具旨在传递对组件的引用.您提供了一个匿名函数来满足此要求，但因此您丢失了 react-router 道具.为了获得它们，您需要将它们传递给 (props) =>;<NewPage {...props}/>(但请不要这样做，使用 render 如果你真的想使用一个函数).

只需剪掉箭头函数，给component prop 组件引用，它就会得到它需要的rout props:

<路由精确路径='/NewPage' component={NewPage}/>

---

由于您使用的是功能组件，我建议将您的组件渲染为 Route 子组件，并使用钩子访问 react-router 值.

<路由精确路径='/NewPage'><新页面/></路线>....导出默认函数 NewPage(props) {让位置 = useLocation();返回 (<div>{location.state}

)}

此语法允许您轻松地将其他可能需要的道具添加到NewPage，同时仍然可以通过钩子使用路由道具.

I am currently trying to pass some information through React-Router-DOM's Link component to another one of my components in which I tried this:

export default function Test() {

      return(
          <div>
             <Link to={{ pathname: './NewPage', state: { testValue: true }}}>New Page</Link>
          </div>
      )
}

export default function NewPage(props) {

     console.log(props.location.state)

     return(
       <div>
         {props.location.state}
       </div>
      )

}

The error says: Cannot read property 'state' of undefined at the console.log(props.location.state) line

Note: I am using React Hooks not class

解决方案

The route props that react-router allows you to use must be passed into your component somehow. There are several patterns for accomplishing this, a HOC (withRouter), a hook, or by having Route pass them in directly by passing it a component prop.

Notice how you instantiate the NextPage component

<Route exact path='/NewPage' component={() => <NewPage />}/>

It is given no props.

The component prop is intended to be passed a reference to a component. You have provided an anonymous function in order to satisfy this requirement, but you lose the react-router props because of it. In order to get them you would need to pass them along (props) => <NewPage {...props}/> (But please don't do that, use render if you really want to use a function).

Simply cut out the arrow function and give the component prop the component reference, and it will get the rout props it needs:

<Route exact path='/NewPage' component={NewPage}/>

---

Since you're using functional components, I would recommend rendering your components as Route children, and using the hooks to access the react-router values.

<Route exact path='/NewPage'>
  <NewPage />
</Route>

....

export default function NewPage(props) {
  let location = useLocation();

  return (
    <div>
      {location.state}
    </div>
  )
}

This syntax allows you to easily add other props that you may need to NewPage, while still being able to use the route props through hooks.

这篇关于来自链接输入状态的未定义值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！