如何在 ReactJS 中使用路由

Question

我需要一些关于 reactjs Routes 以及如何正确显示它们的指导。

所以我的 react 目录如下（我将省略不必要的目录和文件）

Routes.js
App.js
src/
   ComponentOne.jsx
   ComponentTwo.jsx

我的现任Routes.js 长这样

import ComponentOne from './src/ComponentOne'
import ComponentTwo from './src/ComponentTwo'

<Route path='/banuka/' exact component={ComponentOne} />
<Route path='/banuka/test' exact component={ComponentTwo} />

而在ComponentOne.jsx 中，除了一个包裹在Link 或react-router-dom 中的按钮外，什么都没有

let valueobject = {<some-key-value-pairs>} // take a note on this line

<Link to={`/banuka/test`}>
    <Button variant="dark">    
    Upload Data
    </Button>
</Link>

所以当我点击这个Button 时，它会导航我两个ComponentTwo 组件。

这就是问题所在：

我想将变量 valueobject 传递给 props 从 ComponentOne 到 ComponentTwo

但如您所见，ComponentTwo 已经在 Routes.js 中呈现

我怎样才能做到这一点？

你可以建议我一个更好的方法（即使这意味着我必须删除Routes.js，但如果我能保持原样更好）来实现这一点，所以它看起来像：

<ComponentTwo values={valueobject}/>

谢谢！

Answer 1

您可以作为路由状态发送

https://reactrouter.com/web/api/Link/to-object

let valueobject = {<some-key-value-pairs>} // take a note on this line

<Link
  to={{
    pathname: '/banuka/test',
    state: {
      ...valueobject,
    },
  }}
>
    <Button variant="dark">    
    Upload Data
    </Button>
</Link>