Nested routes and Switch - how to pass props.match.params.id?

Question

I have been trying to understand nested routes and switch in the React v4 Router. Consider the main router looks like this (simplified):

<Switch>
  <Route path="/" component={LoginPage} exact={true} />
  <Route path="/dashboard/edit/:id" component={DashboardPage} />
  <Route path="/dashboard" component={DashboardPage} />
</Switch>

The "dashboard" component renders the sub-route:

  render(){
    return (
      <div className="note">
        <Route to='/edit/:id' render={(props) =>
          <div>
            <NoteList {...props} />
            <EditNotePage {...props} />
          </div>
        } />
      </div>
    )
  }

The "EditNotePage" component can access the param by:

const mapStateToProps = (state, props) => ({
  note: state.notes.find((note) => note.id === props.match.params.id
});

Is this the correct approach? It seems a little redundant to specify "/dashboard/edit/:id" twice ( ? ) Once in main router and the again in the dashboard component.

However, if I do not match the route in the main router "Switch" the "props.match.params.id" is not accessible since "props.match" will only point to "/dashboard" .

Have I missed something crucial regarding how the React v4 Router works? :)

Kind regards Kermit

Answer 1

Nope, didn't miss anything. That's how react router v4 works. You define full routes. The trick you can use is that you can grab the current path and prepend it to your "nested path".