Question

我已经在“ app.js”文件中设置了我的应用程序，并在render方法中定义了这样的路由器

        <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} />
       )} 
/>

但是我无法使其正常运作……任何帮助都可以，我对整个路由器都是全新的反应。

Answer 1

您可以将状态添加到history.push（https://reacttraining.com/react-router/web/api/history）中，该状态可用于正在渲染的组件（DetailsScene）。记住，要使用Router（...）包装DetailsScene，以便在其道具中使用history.location.state。

React将对象传递到路线

1 个答案: