Как добавлять определенные компоненты на страницу в зависимости от url?

Question

app.jsx

const root = ReactDOM.createRoot(document.querySelector(".root"));
root.render(
    <Router>
        <AuthProvider>
            <Routes>
                <Route path='/account/' element={<Admin/>}/>
            </Routes>
        </AuthProvider>
    </Router>
)

Admin.jsx

const Admin = () => {
    return (
        <Layout>
            <main className={styles.main}>
                <Sidbar/>
                <Routes>
                    <Route  path='/account/profile' element={<Profile/>}/>
                </Routes>
            </main>
        </Layout>
    )
}

export default Admin

Как сделать, чтобы когда пользователь заходит в кабинет отображался определенный компонент? Я думаю, что неправильно создавать несколько файлов такие как Admin, чтобы отобразить страницу заказов или добавление товара, a как по-другому сделать не знаю.

Answer 1

чтобы отобразить контент определенной страницы используйте компонент <Outlet />.

Пример структуры роутинга:

<Route path={"profile"} >
   <Route path={""} element={<Profile />} />
   <Route path={"settings"} element ={<ProfileSettings/>} />
   ...другие роуты
</Route>

Как использовать outlet:

<MainContainer>
    <Header />
    <Outlet />
    <Footer />
</MainContainer>

На месте outlet появится тот компонент, который указан в роутинге

БЛОГ НА HUSL

Как добавлять определенные компоненты на страницу в зависимости от url?

Ответы (1 шт):