Какой способ объявить вложенные маршруты в React-Router-Dom

Question

Я работаю с ReactionJs и пытаюсь создать несколько вложенных маршрутов. Ниже вы можете увидеть части маршрутизации моих файлов:

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>
        );
    }
}

Не спрашивайте меня, почему, но я хочу создать следующие URL:

• / регистрация: Форма регистрации
• / регистрация / человек: часть формы регистрации 2
• / регистрация / персона /: id: информация об идентификаторе пользователя при регистрации

Я добавил это в свой App.js файл, и он работает:

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

Но я хочу знать, является ли это хорошим способом создания вложенных маршрутов или лучше разделить маршрут следующим образом: https://stackoverflow.com/a/43846223/4023379

Или, может, по-другому?

Спасибо

Answer 1

использовать вложенные маршруты, если Страницы имеют общую логику / компоненты, такие как верхний и нижний колонтитулы.

использовать отдельные маршруты, если Page не разделяет подобную логику. просто из-за того, что url начинается с /singup не обязательно, значит, вы должны вложить свои компоненты