javascript - React : location. 页面加载后首次导航时状态未定义

Question

我有一个 React 组件，它显示一个链接:

Magic.tsx:

const { message } = this.props;
<Link to={ { pathname: HOGWARTS, state: { message } } }>
  Go to Page
</Link>

我正在传递这个Magic组件作为另一个组件的 Prop，我在其中使用 Dynamic message 迭代它状态

Parent.tsx

const CustomComp = this.props.Magic;
const content = messageArray.map(msg => <CustomComp message={ msg } />)
{ content } //Render all the Links with message state

这正确地呈现了链接。但是当我单击链接并调试HOGWARTS时页面，location.state 未定义。如果返回上一页，再次单击，location.state 是正确的，有 message数据。因此，不知何故，它在页面加载时不起作用，但第二次单击后，它就起作用了。

有人遇到同样的问题吗？

注意:我已经检查了 <Link />使用 React Devtool 标记，在侧边栏上显示，什么 message状态附加到此链接。

Answer 1

'state'匹配'BrowserRouter'，'hash'匹配'HashRouter'，所以如果你使用'HashRouter'匹配'hash'，'state'必须是未定义的