React route：如何从组件中获取当前的route key答案

【问题标题】：React route: how to obtain the current route key from the componentReact route：如何从组件中获取当前的route key
【发布时间】：2020-12-01 23:09:22
【问题描述】：

说，我有以下包装器：

<Switch>
<Route path={`/app/list`} component={ListPage} key="list"/>
<Route path={`/app/view`} component={EditPage} key="view"/>
<Route path={`/app/edit`} component={EditPage} key="edit"/>
<Route path={`/app/new`} component={EditPage} key="new"/>
 </Switch>

当我加载相应的组件时，比如说ListPage，我希望能够得到当前路由的key，在这种情况下，就是“list”。

如果我检查 this.props.match，我只有 isExact、params、path、url 但不是键。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

您没有获得 key 属性，因为您只是将希望由路由器渲染的组件提供给 Route 组件，这样您就无法指定组件将接受哪些道具，除了默认道具- 比赛、地点、历史。你可以阅读更多关于它的信息here。

您可以使用render 属性来指定如何通过提供渲染函数来渲染组件，这样您就可以指定组件将接受的属性，例如key。该函数将拥有路由器提供的所有默认道具，您可以将它们作为道具传播到您的组件上。

由于 key 和 ref 是 React 中的保留 props，并且它们不会传递给组件，因此我将 key prop 重命名为 keyName。更多信息可以在here找到。

它看起来像：

<Switch>
  <Route path="/app/list" render={(props) => <ListPage {...props} keyName="list"/>} />
  <Route path="/app/view" render={(props) => <EditPage {...props} keyName="list"/>}/>
  <Route path="/app/edit" render={(props) => <EditPage {...props} keyName="edit"/>} />
  <Route path="/app/new" render={(props) => <EditPage {...props} keyName="new" />}/>
</Switch>

您将能够通过在呈现的组件内使用props.key 来访问密钥。

当然，最好将渲染函数提取到一个名为 renderWithKey 的函数中，以便删除重复项，使代码更简洁。

【讨论】：

谢谢，它只有在参数名称不是@MedetTleukabiluly 提到的“key”时才有效。
不客气。我忘了那个键是保留的，所以我会重命名它。

【解决方案2】：

它是用于反应或内部react-router的保留属性

如果您想获得list，请使用不同的属性。 ref, key 保留

【讨论】：

但是我将如何传递任何其他属性？如果我只是将它添加到路由对象中，它就不起作用。