reactjs - 使用 render() 时，REACT 路由器无法访问参数

Question

我是 redux 的新手，我创建了一个导航到用户编辑页面的路线，我还想使用下面的代码将 store 和 history 作为 props 传递。

<Route path="/edit/:id" render={({history}) => (
          <EditUser store={store} history={history} />
)}/>

但是现在我无法访问我在 EditUser 组件中传递的参数（：id）。当我尝试使用this.props.match.params.id访问时，它显示未定义，但如果我重写我的路由到

<Route path="/edit/:id" component={EditUser}/>

但现在我认为我无法通过其他道具。

非常感谢帮助。

score 5 · Accepted Answer

如果你想使用match你必须将它传递给你的组件。

<Route path="/edit/:id" render={({history, match}) => (
  <EditUser store={store} history={history} match={match} />
)}/>

您也可以只传递所有道具：

<Route path="/edit/:id" render={props => (
  <EditUser store={store} {...props} />
)}/>

或者您可以使用 react-redux 的connect功能来访问商店

<Route path="/edit/:id" component={connect(mapStateToProps)(EditUser)}/>

1 回答 1