Как создать вложенные маршруты на frontend'е при помощи React-Router?

Question

[seregindev]

Доброго времени суток!

Начал осваивать React и решил в качестве тренеровочного приложения сделать "почтовый клиент", с простыми функциями фильтрования, чтения и т.д. Просто для того чтобы разобраться с React'ом.

Создав некий коркас приступил к созданию маршрутизации при помощи библиотеки React-Router.
Создать простую навигацию оказалось просто, но подойдя к вложенной встрял, совсем..

В чём заключаеися проблема.
У меня имеется 3 кнопки позволяющие фильтровать сообщения(пока что сломал).

Url стартовой страницы приложения выглядит так - localhost:8080/#/mail
При выборе сообщения к url'у добавляется id выбранного сообщения - localhost:8080/#/mail/123
При клике на кнопку "Прочитанные", url меняется на - localhost:8080/#/mail/read

И я не понимаю как я мне при выборе сообщения из прочитанного списка продолжать url, т.к. находять на "категории" прочитанных сообщений продолжать мой url следующим образом - localhost:8080/#/mail/read/123

А происходит следующее, при клике на сообщение, я поподаю на обычный url, без категории... т.к. на - localhost:8080/#/mail/123

Надеюсь понятно объяснил..

Репозиторий с кодом: https://github.com/VladislavDev/simple-react-mail-...

Comments

[Максим]

seregindev, не могу точно ответить на ваш вопрос, так как до сих пор работаю с 3м роутером, но так как вы оформили вопрос очень грамотно, подкину несколько замечаний:
1) node_modules не нужно запихивать в github
2) такую запись можно сократить, убрав отовсюду this.state , но не забывая при этом сохранить значения в переменные:

const { author, time, theme, message }
 = this.state.currentMessage

И самое главное, зачем вам такой URL? Допускаю, что это в целях обучения, но бывает выдумывание себе задачи накладывают трудности на изучение. Если стремиться к почтовикам текущим: ни gmail, ни mail.ru так не делают. Я считаю, что у вас не логично получается. Зачем прочитанные письма по отдельному URL пихать? Допустим есть у письма признак, что оно "прочитано", а у вас есть фильтр на "прочитанные / не прочитанные" - то нужно рендерить данные в зависимости от фильтра, а не делать еще один URL. В обоих веб-интерфейсах, идет /bla-bla/id_письма

А когда у вас будет более реальная задача, например показывать /sent/ID /inbox/ID (как у Gmail) - может тогда и решение будет проще.

В любом случае, о react-router 4 можно найти много информации. Хабр, гугл

Лучше всего полностью прочитать (и выполнить примеры) из офф.документации.

[seregindev]

Максим, Спасибо Вам огромное, за совет. Поступлю таким образом, а то уже больно много времени торчу на этом месте...