Вложенные маршруты и Switch - как передать props.match.params.id?

Question

Я пытался понять вложенные маршруты и переключиться в маршрутизаторе React v4.Предположим, что основной маршрутизатор выглядит следующим образом (упрощенно):

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

Компонент «Панель мониторинга» отображает суб-маршрут:

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

Компонент «EditNotePage» может получить доступ к параметру с помощью:

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

Это правильный подход?Кажется немного излишним указывать «/ dashboard / edit /: id» дважды (?) Один раз в основном маршрутизаторе, а второй - в компоненте панели мониторинга.

Однако, если я не совпадаю с маршрутом в главном маршрутизаторе «Switch», «props.match.params.id» будет недоступен, поскольку «props.match» будет указывать только на «/ dashboard».

Я что-то упустил из-за того, как работает React v4 Router?:)

С уважением, Кермит

Answer 1

Нет, ничего не пропустил.Вот как реагирует роутер v4.Вы определяете полные маршруты.Уловка, которую вы можете использовать, заключается в том, что вы можете захватить текущий путь и добавить его к вашему «вложенному пути».