Как правильно организовать роутинг в приложении?

Question

[c00ldev]

Роутинг организован через react-router-dom. Структа следующая:

<Route exact path="/goods" component={ Goods } />
<Route path="/goods/:id" component={ Details } />
<Route exact path="/new" component={ NewGood } />

Хочу добиться, чтобы по роуту /goods/new был доступен компонент NewGood, т.е.:

<Route exact path="/goods/new" component={ NewGood } />

Проблема в том, что при таком маршруте /new становится как /:id. Как решить проблему?
Воспроизвел проблему в песочнице:
https://codesandbox.io/s/still-tdd-dcsir

Answer 1

[Nikolay Matyushkin]

Ваш ответ на вопрос в документации

Немного растолкую.

1. Создаём роут по урлу "/goods", где будет рендериться компонента Goods (вы уже создали)
2. В компоненте Goods организовываем новый роутинг.

Answer 2

[Алексей Уколов]

Порядок важен, емнип:

<Route exact path="/goods" component={ Goods } />
<Route exact path="/goods/new" component={ NewGood } />
<Route path="/goods/:id" component={ Details } />

Comments

[c00ldev]

Возможно, что-то делаю не так, но проблема не изчезает:
https://codesandbox.io/s/still-tdd-dcsir

[Алексей Уколов]

Нужно роуты обернуть в <Switch/>