道具未传递到ReactJS / react-router中的相对URL

时间:2018-08-17 15:33:24

标签: reactjs react-router

我有以下代码,其中{...props}中的一个函数是从父组件向下传递的。在所有路线中,除了具有/:id的路线之外,该功能在props中也可用。

有什么想法吗?

<Switch>
  <Route exact="exact" path="/" render={() => (<ManageClients {...props}/>)}/>
  <Route exact="exact" path="/new-client" render={() => (<AddClient {...props}/>) }/>
  <Route exact="exact" path="/admins" render={() => (<ManageAdmins {...props}/>) }/>
  <Route exact="exact" path="/files" render={() => (<ManageFiles {...props}/>) }/>
  <Route exact="exact" path="/new-file" render={() => (<AddFile {...props}/>) }/>
  <Route exact="exact" path="/update-client/:id" render={(props) => (<EditClient {...props} />) }/>
  <Route exact="exact" path="/update-file/:id" render={(props) => (<EditFile {...props}/>) }/>
  <Route exact="exact" path="/clone/:id" render={(props) => (<CloneClient {...props}/>) }/>
  <Route exact="exact" path="/new-admin"render={() => (<NewAdmin {...props}/>) }/> </Switch>

2 个答案:

答案 0 :(得分:1)

如果您要分别传递父项道具和路线道具,请使用此选项

<Route exact="exact" path="/clone/:id" render={(otherProps) => <CloneClient {...props} otherProps={otherProps} /> }/>

或如果要合并它们,则此:

<Route exact="exact" path="/clone/:id" render={(otherProps) => <CloneClient {...props, ...otherProps} /> }/>

答案 1 :(得分:0)

以上答案几乎就在那里。我必须删除路线周围的<Switch>,然后将路线写为:

<Route
    exact="exact"
    path="/update-client/:id"
    render={otherProps => (
    <EditClient {...props} {...otherProps} />
    )}
/>