javascript - 如何使用 React Router 修改作为 props 发送的路由参数？

Question

我有一个 React Router，路由如下:

<Router history={history}>
  <Route path='/' component={App} />
  <Route path='/:fileType/:fileId' component={App} />
</Router>

这会将 props 放入我的 App 中，如下所示:

{
  fileType: 'whatever', 
  fileId: 'ABC5734'
}

但是，我设计了我的组件，因此它需要这种格式:

{
  file: {
    type: 'whatever', 
    id: 'ABC5734'
  }
}

因此，我想在将路径 Prop 发送到组件之前对其进行转换。像这样:

<Router history={history}>
  <Route path='/' component={App} />
  <Route 
    path='/:fileType/:fileId' 
    component={(props) => <App file={{type: props.fileType, id: props.fileId}} />} />
</Router>

这可能吗？

Answer 1

您应该使用高阶组件。

您可以使用 mapProps来自 recompose 的高阶组件:

import mapProps from 'recompose/mapProps'

<Router history={history}>
  <Route path='/' component={App} />
  <Route 
    path='/:fileType/:fileId' 
    component={mapProps(({ params: { fileType, fileId } }) => ({
        fileType,
        fileId
    }))(App)}/>
</Router>