如何在單擊 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>