我在“app.js”文件中设置了我的应用程序,我在渲染方法中定义了这样的路由器
<HashRouter>
<StatusToast />
<Switch>
<Route
exact={true}
path="/"
render={props => (
<ImageScene{...props} title="Images & Information Search" />
)}
/>
<Route path="/case/:id/images" component={DetailsScene} />
</Switch>
</HashRouter>
来自 ImageScene
在表行上单击,我调用如下方法:
this.props.history.push(/case/${id}/images)
这会触发路由并加载DetailsScene
我可以在哪里获得 id
的传递像这样this.props.match.params.id
到目前为止一切正常,没有任何问题。
我的问题是如何传递一个字符串(id)以上的内容,我可以以某种方式将整个对象传递给路由吗?
我尝试对第二条路线执行类似的操作,而不是:
<Route path="/case/:id/images" component={DetailsScene} />
设置ImageScene
一种可以公开所选对象的方法,现在我们只做一个简单的方法,例如:
export function getSelectedRow() {
return {
title: 'test'
}
}
然后设置如下路线:
const object = getSelectedRow();
<Route path="/case/:id/images"
render={props => (<DetailsScene{...props} title={object.title} />
)}
/>
但我无法让它工作......任何帮助都会很高兴,我对 react 和整个路由器完全陌生。
最佳答案
您可以将状态添加到history.push (https://reacttraining.com/react-router/web/api/history),该状态可用于正在渲染的组件(DetailsScene)。请记住用Router(...) 包装DetailsScene,以便在其属性中提供history.location.state。
关于reactjs - React 将一个对象传递给路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57400871/