时间戳

首页 > 解决方案 > 是否可以从 React 路由中获取密钥以传入组件？

reactjs - 是否可以从 React 路由中获取密钥以传入组件？

问题描述

我的目标是编辑表单和添加表单，现在我的问题是当我点击“编辑”按钮时，它成功显示，但是当按下“添加新”按钮时，它会呈现以前的数据。

目前，我正在尝试在我的反应应用程序中使用单独的路由但在相同的组件中添加/编辑表单，如下所示：

 <>
    <Switch>
        <Route key="add" path={`${match.url}/new`} component={AgenciesUpdatePage} />
        <Route key="edit" path={`${match.url}/:id/edit`} component={AgenciesUpdatePage} />
        <Route path={`${match.url}/:id`} component={AgenciesViewPage} />
        <Route path={match.url} component={AgenciesListPage} />
    </Switch>
</>

我如何让（密钥）传递给我的组件，因为根据我的理解，密钥对于区分同一组件的两条路径是必要的。

否则，如果您有其他解决方案，我想检查一下。

标签： reactjsreact-router

解决方案

key路由中 prop的目的是用于组件映射。将AgenciesUpdatePage无法使用您当前的实现访问其值。

将您的路线更改为以下内容：

<Route path={`${match.url}/new`} component={() => <AgenciesUpdatePage action="add" />} />
<Route path={`${match.url}/:id/edit`} component={() => <AgenciesUpdatePage action="edit" />} />

然后更新您的AgenciesUpdatePage组件以使用您新实现action的道具。

您可以AgenciesUpdatePage使用以下方式访问它：

const AgenciesUpdatePage = ({ action }) => {
  if (action === 'add') // Render or do something
  if (action === 'edit') // Render or do something

  return (...)
}

推荐阅读