如何在单击 ReactJs 中动态生成的“链接”时将值传递给页面？

Question

我有一个元素array （例如 urls_array），并使用这个array动态创建指向页面的链接。 单击动态创建的链接时，如何将此array中的相应值传递到页面（目标）？

1 - Leftnav.js


class Leftnav extends React.Component {
  render() {

    var urls_array = [
      url1,
      url2,
      url3
    ] 

    return (
      <div className="container">
        <SideNavMenu title="Dynamically Generated">
            {
                urls_array.map(links => (
                <SideNavMenuItem key={links} element={Link} to="/singlepage" >{links.toString()}</SideNavMenuItem>
                ))
            }
        </SideNavMenu>
      </div>
    )
  }
}

export default Leftnav;

上面的代码将创建三个链接 url1、url2 和 url3，当单击这些链接中的任何一个时，我们将被重定向到单个页面。

2 - singlepage.js

class singlepage extends React.Component {
    render() {
        return (
            <React.Fragment>
            </React.Fragment>
        );
    }
}    
export default singlepage;

我在这里想要实现的是在单击单url1我需要（值） url1的 url1 时，如果我单击url2我期待url2中的 url2 等等。

Answer 1

只需将 state 里面的数据传递to

<Link
  to={{
    pathname: "/singlepage",
    state: { links }
  }}
/>

并使用singlepage在单页组件中this.props.location.state.links

希望有帮助！！！

Answer 2

尝试这个，

<Link to={{ pathname: `/componentname`, state: { data: yourdata }}}></Link>