Which way to declare nested routes in React-Router-Dom

Question

I'm working with reactJs and trying to create some nested routes. Below you can see the routing parts of my files :

main.js :

ReactDOM.render(
    <Router>
        <App />
    </Router>,
    document.getElementById('page')
);

App.js :

class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/login" component={Login} />
                    <Route path="/signup" component={SignUp} />
                    <Route path="/contact" component={Contact} />
                    <ProtectedRoute path="/user/profile" component={Profile} />
                    <Route component={NotFound} />
                </Switch>
                <Footer />
            </div>
        );
    }
}

Don't ask me why, but I want to create the following url's :

/signup : SignUp form
/signup/person : SignUp form part 2
/signup/person/:id : SignUp user id informations

I added this in my App.js file and It's works :

<Route exact path="/signup" component={SignUp} />
<Route exact path="/signup/person" component={SignUpPerson} />
<Route path="/signup/person/:id" component={SignUpId} />

But I want to know if it's a good way to create nested routes or it's better to separate the route like this post : https://stackoverflow.com/a/43846223/4023379

Or maybe an other way ?

Thanks

It's primarily opinion based what's the best approach. Either one works fine. — Tholle, Apr 04 '19 at 09:42

score 0 · Answer 1 · answered Apr 04 '19 at 09:47

0

use nested routes if Pages have common logic/components like Header, Footer.

use separate routes if Page doesn't share similar logic. just because of url start with /singup not necessary mean you have to nested your components

answered Apr 04 '19 at 09:47

Kyaw Kyaw Soe

2,170
9
21

Which way to declare nested routes in React-Router-Dom

1 Answers1