如何使用 React Router 在链接中传递 Props？

在 React-Router 中的 Link 中传递 Props

当使用 时React-Router 中的组件，可以将属性传递给新视图。为此，请使用 的 to 属性。并传递具有所需属性的对象。例如：

<code class="js"><Link to={{ pathname: '/ideas', query: { testvalue: 'hello' } }}>Create Idea</Link></code>

在目标视图中，使用以下模式访问传递的属性：

<code class="js">render() {
    console.log(this.props.match.params.testvalue, this.props.location.query.backurl)
    return <span>{testvalue} {backurl}</span>    
}</code>

注意：上述语法现已过时

在更新的功能组件中使用hooks:

<code class="js">const CreatedIdeaView = () => {
    const { testvalue } = useParams();
    const { query, search } = useLocation(); 
    console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'))
    return <span>{testvalue} {backurl}</span>    
}</code>

进一步注意事项

• 确保目标路由具有定义的匹配路径来接收传递的属性。在此示例中，路由应定义如下：

<code class="js"><Route name="ideas" path="/:testvalue" handler={CreateIdeaView} /></code>

• React-Router 中使用的 Link 组件已在最近版本中更新。传递属性的语法可能会有所不同，具体取决于所使用的版本。

以上是如何使用 React Router 在链接中传递 Props？的详细内容。更多信息请关注PHP中文网其他相关文章！