Что такое маршрутизация на стороне клиента?
Маршрутизация на стороне клиента позволяет приложению обновлять URL-адрес по щелчку ссылки, не отправляя еще один запрос на другой документ с сервера. Это обеспечивает более быстрое взаимодействие с пользователем, поскольку браузеру не нужно запрашивать совершенно новый документ или повторно оценивать активы CSS и JavaScript для следующей страницы.
Использование маршрутизатора React
React Router — это облегченная полнофункциональная библиотека маршрутизации для библиотеки React JavaScript. Чтобы использовать его, нам сначала нужно установить библиотеку с помощью npm или yarn.
npm install react-router-dom yarn add react-router-dom
Затем мы хотим импортировать {BrowserRouter} в наш index.js и обернуть наш компонент приложения компонентами BrowserRouter. Мы хотим, чтобы BrowserRouter был самым высоким родительским компонентом в нашем проекте.
import {BrowserRouter} from 'react-router-dom;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Затем мы импортируем компоненты {Routes, Route} в наш App.js и обернем наши компоненты Routes. Если мы хотим, чтобы компонент отображался на каждой странице независимо от того, какой компонент мы посещаем (например, панель навигации или заголовок), мы можем исключить его из маршрутов.
<Navbar /> <Routes> <Home /> <Profile /> <Help /> </Routes>
Как нам подключить пути к дочерним компонентам? Вот так:
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/profile" element={<Profile prop={prop}/>} />
<Route path="/help" element={<Help />} />
</Routes>
Здесь мы в основном устанавливаем URL-адреса для компонентов. Во-первых, мы определяем путь для каждого компонента, используя «path=», и какой компонент отображать, когда мы направляемся к этому пути, с помощью «element={component идет сюда}». Мы также можем легко передавать любые реквизиты, помещая их в соответствующие компоненты.
Что, если мы хотим перейти к компоненту, щелкнув элемент меню на панели навигации?
import {Link} from 'react-router-dom'
function Navbar() {
return(
<header className="navbar">
<nav>
<ul className="navlinks">
<Link to="/"><li>Home</li></Link>
<Link to="/profile"><li>Profile</li></Link>
<Link to='/help'><li>Help</li></Link>
</ul>
</nav>
</header>
)
}
export default Navbar;
В этом случае нам нужно импортировать компонент под названием Link из библиотеки React Router. Затем мы оборачиваем каждый пункт меню «Link». Внутри компонента Link мы повторно объявляем наш путь, который мы объявили еще в App.js, используя «to=». Обязательно используйте те же пути, которые были объявлены в App.js!
Теперь эти пункты меню приведут нас к соответствующим компонентам!
