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

Question

I have the following code, where in {...props} a function is being passed down from a parent component. In all the routes, this function is available in props apart from those routes that have a /:id .

Any ideas why?

<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>

Answer 1

Use this if you want to pass the parent props and the routes props separately

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

or this if you want to merge them:

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

Answer 2

The above answer was almost there. I had to remove the <Switch> around my routes, and then write the route as:

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