Блог

Я создаю приложение react с использованием react-маршрутизатора 5, и вот поток экрана во вложении. Я совершенно сбит с толку, чтобы достичь маршрута в соответствии с пользовательским интерфейсом.

В принципе, приложение имеет 4 экрана, которые начинаются с входа в систему, попадают в список учащихся(Список предметов), Информацию о студенте(Ограниченная информация о конкретном студенте) и информацию о студенте(подробная информация о конкретном студенте).

 - Login ('/') --gt; No header and side nav bar  - Student List ('/students')--gt; Student Info('/student/01') - --gt; With header and side nav bar  - Student Detailed Info ('/detail')- --gt; Without header and side nav bar(but not a modal window)  

Поток Грохота:

Вы можете: 1 —

 lt;Route path="students"gt; // Wrap the routes/pages with header and sidebar lt;/Routegt; lt;Route path="detail"gt; // Wrap the routes/pages without header and sidebar lt;/Routegt;  

2 — на компонентах заголовка/боковой панели определите текущий маршрут и пропустите визуализацию этих компонентов.

Вы можете достичь этого с помощью структуры ваших маршрутов…

 lt;Route exact path=""gt;  login screen lt;/Routegt; lt;Routegt;  lt;Header /gt;  lt;sidebar /gt;  lt;Switchgt;  lt;Route path="students" /gt;  lt;Route path="info" /gt;  ...  lt;/Switchgt; lt;/Routegt;