React Router v4 - Как динамически использовать макеты
Для начала, я новичок в React и React-Router. Я знаю основы каждого. Вот мой сценарий ...
Я хочу иметь отдельную страницу входа в систему без макетов на маршруте (/ login). Когда пользователь входит в систему, я хочу направить его в / home. Эта домашняя страница и все остальные страницы (кроме входа в систему) будут повторно использовать макет, содержащий панель навигации и боковую панель.
Как скрыть многоразовый макет, когда пользователь посещает маршрут / login? Я использую условный или есть особый путь React-Router? Я не смог найти в документации примеров, подходящих для моего сценария.
Большое спасибо!
Ответы 1
Если вы спрашиваете, как я могу визуализировать navbar и sidebar для всех компонентов, кроме login, то вы можете проверить браузер url.
Есть много способов сделать это, но один из них следующий:
<Route path = "*" render = {props => <Layout {...props} />} />
Теперь это будет отображаться для всех ваших маршрутов. Затем внутри Layout вы можете проверить маршрут и визуализировать что-то только в том случае, если маршрут не равен login.
render(){
if (this.props.location === "login"){return null}
...
}
Набирая это, вы можете сделать это прямо в React Router, возможно, исключив определенный маршрут.
почему бы просто не иметь двух компонентов? логин пуст, а на других страницах используется шаблон?