我认为作者的React Router(v4)刚刚在Router HOC中添加了它,以安抚某些用户。但是,我相信更好的方法是只使用render prop并制作一个简单的PropsRoute组件来传递这些prop。由于它不像withRouter那样“连接”组件,因此更易于测试。用Router包装了很多嵌套组件,这不会很有趣。另一个好处是,您还可以通过此通行证通过任何想要的路线道具。这是使用渲染道具的简单示例。(确切的例子来自他们的网站https://reacttraining.com/react-router/web/api/Route/render-func)(src / components / routes / props-route)
import React from 'react';
import { Route } from 'react-router';
export const PropsRoute = ({ component: Component, ...props }) => (
<Route
{ ...props }
render={ renderProps => (<Component { ...renderProps } { ...props } />) }
/>
);
export default PropsRoute;
用法:(注意获取路由参数(match.params),您可以只使用此组件,这些将为您传递)
import React from 'react';
import PropsRoute from 'src/components/routes/props-route';
export const someComponent = props => (<PropsRoute component={ Profile } />);
还请注意,您也可以通过这种方式传递任何想要的额外道具
<PropsRoute isFetching={ isFetchingProfile } title="User Profile" component={ Profile } />