Настройка маршрутизации в React довольно проста, но включает в себя ряд шагов. В своем блоге Маршрутизация в React, часть 1 я объяснил, как установить react-router-dom, а затем использовать его в файле index.js.
Чтобы пользователю было легко перемещаться между разными страницами, нам также понадобится панель навигации. Но сначала мы разделим то, что сейчас находится в файле index.js, между App.js и index.js. Вот как выглядел файл index.js после завершения первой части:
Перед созданием нашей панели навигации мы переместим маршрутизацию в App.js, где также добавим панель навигации.
Теперь наш App.js выглядит так:
А в index.js мы убрали маршрутизацию, но вместо этого импортируем App.js.
Компонент навигации
Следующим шагом является создание компонента Navbar.js и включение его в App.js.
- Для компонента Navbar нам нужно импортировать NavLink из react-router-dom.
- Нам нужно придать навигационной панели некоторый стиль, либо как здесь, непосредственно в компоненте, либо путем определения стиля в нашем компоненте css и ссылки на него с помощью имени класса в компоненте навигационной панели. Здесь это делается непосредственно в компоненте Navbar.
- Наконец, нам нужно определить, что должно быть включено в панель навигации, когда пользователь ее увидит. Таким образом, для каждой страницы мы включаем путь браузера, имя и ссылку на соответствующую страницу.
И, наконец, нам нужно импортировать панель навигации в App.js и отобразить ее. Теперь наша маршрутизация и навигация должны работать!
Удачного кодирования!
Сюзанна Лундквист
