Как изменить параметры маршрута, отправленные в качестве реквизита с помощью React Router?

Question

У меня есть Реагировать 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

React-маршрутизатор посылает маршрут Params под 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> 

Answer 2

Вы должны использовать компонент более высокого порядка.

Вы можете использовать компонент mapProps высшего порядка от recompose: