0

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 как по-другому сделать не знаю.

2
  • 1
    Не помню точно, посмотрите в сторону Outlet 16 апр 2023 в 12:49
  • Хорошо, спасибо
    – all time
    16 апр 2023 в 13:06

1 ответ 1

1

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

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

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

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

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

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

4
  • Как же некрасиво и не нужно выглядит строка обернутая в { } 16 апр 2023 в 13:43
  • @OliverPatterson дело вкуса, как мне кажется. Не люблю писать где-то фигурные, где-то без них
    – Max
    16 апр 2023 в 13:45
  • Просто я не понимаю, зачем их ставить там, где это явно не нужно? 16 апр 2023 в 13:50
  • @OliverPatterson для однообразия вида аргументов
    – Max
    16 апр 2023 в 13:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.