Javascript 如何使用React路由器创建动态链接和动态内容？

我的redux存储（reducer）中有一个数组

基于此数组，我在其他组件（注释）中渲染元素

{data.map（（项目，索引）=>(
{数据[索引][3]}
{数据[索引][4]}
{数据[索引][0]}
打开
))}

单击链接时，它将转到编辑器组件，链接基于我单击的元素（例如Editor/2020-09-15）。 在我的app.js中，我有一条路线：

但在我的编辑器组件中，我渲染了数组中的所有数据

 return (
    <div>
      <Container>
        <div>
          <Link to="/bundlenotes">
            <label htmlFor="icon-button-file">
              <IconButton
              >
                <ArrowBackRoundedIcon />
              </IconButton>
            </label>
          </Link>
        </div>

        {mydata.map((item, index) => (
          <div>
            <h1>{data[index][3]}</h1>
            <h3>{data[index][4]}</h3>
            <h3>{data[index][0]}</h3>
          </div>
        ))}

        <MUIRichTextEditor
          label="Type something..."
          value={localStorage.getItem('data' + data[0][0])}
          onSave={save}
        />
      </Container>
    </div>
  )

返回(
{mydata.map（（项目，索引）=>(
{数据[索引][3]}
{数据[索引][4]}
{数据[索引][0]}
))}
)

但是如何基于我单击的组件动态地呈现编辑器组件中的数据呢？因此，当我单击第一个注释时，编辑器组件仅显示来自数组的相同数据，而不是与此方法类似的所有数据：

   {data.map((item, index) => (
          <div>
            <h1>{data[index][3]}</h1>
            <h3>{data[index][4]}</h3>
            <h3>{data[index][0]}</h3>
          </div>
        ))}

{data.map（（项目，索引）=>(
{数据[索引][3]}
{数据[索引][4]}
{数据[索引][0]}
))}

以及如何将编辑器组件中的值动态保存到localStorage，以便每个编辑器链接都有自己的值

 return (
    <div>
      <Container>
        <div>
          <Link to="/bundlenotes">
            <label htmlFor="icon-button-file">
              <IconButton
              >
                <ArrowBackRoundedIcon />
              </IconButton>
            </label>
          </Link>
        </div>

        {mydata.map((item, index) => (
          <div>
            <h1>{data[index][3]}</h1>
            <h3>{data[index][4]}</h3>
            <h3>{data[index][0]}</h3>
          </div>
        ))}

        <MUIRichTextEditor
          label="Type something..."
          value={localStorage.getItem('data' + data[0][0])}
          onSave={save}
        />
      </Container>
    </div>
  )

   {data.map((item, index) => (
          <div>
            <h1>{data[index][3]}</h1>
            <h3>{data[index][4]}</h3>
            <h3>{data[index][0]}</h3>
          </div>
        ))}