How to properly organize routing in an application?

Question

React

Routing is organized through react-router-dom. The structure is the following:

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

I want to ensure that the NewGood component is available on the /goods/new route, i.e.:

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

The problem is that with this route, /new becomes /:id. How to solve the problem?
Reproduced the issue in the sandbox:
https://codesandbox.io/s/still-tdd-dcsir

Answer 1

Your answer to the question in the documentation
I'll explain a little.
1. Create a route at the "/goods" url, where the Goods component will be rendered (you have already created it)
2. In the Goods component, organize a new routing.

Answer 2

The order is important, emnip:

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