what is the way of making multiple routes with the same initiate paths in react

Question

I have the following code in react js

const routing = (
    <Router>
        <div>
            <Route path="/posts" component={Posts} />
            <Route path="/posts/new" component={New} />
        </div>
    </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

when I try to write localhost/posts or localhost/posts/new , the same components called . I know that this behaviour occurred because I have "posts" in both routes . any solution for my problem , I need "posts" in both routes

score 0 · Accepted Answer · answered Jan 29 '20 at 22:15

Easiest solution:

Put your /posts/new route before your /posts route. React does partial matching starting with your first route. So /posts/* will always match with /posts (unless you use the exact prop!)

Better solution:

Use the exact prop on your /posts route to only accept requests to /posts. See my answer here for more details on how exact works in React: React : difference between <Route exact path="/" /> and <Route path="/" />

what is the way of making multiple routes with the same initiate paths in react

1 Answers1