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

Question

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

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

这会将道具放入我的 App 中，如下所示：

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

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

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

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

<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 Higher-order Component from 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>

Answer 2

React-router 在 this.props.params 下发送路由参数。因此，更正您的代码。

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

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

How do I modify the route parameters sent as props with React Router?

javascript

router

reactjs

react-router