reactjs - React 将一个对象传递给路由

Question

我在“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 和整个路由器完全陌生。

Answer 1

您可以将状态添加到history.push (https://reacttraining.com/react-router/web/api/history)，该状态可用于正在渲染的组件(DetailsS​​cene)。请记住用Router(...) 包装DetailsS​​cene，以便在其属性中提供history.location.state。