@karen.wisozk
Для создания роутинга без перезагрузки страницы в React.js можно использовать библиотеку React Router.
React Router предоставляет компоненты для определения маршрутов приложения и отображения соответствующих компонентов React.
Пример использования React Router для определения маршрутов и компонентов:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './components/Home'; import About from './components/About'; import Contact from './components/Contact'; function App() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </Router> ); } export default App; |
Здесь мы используем компонент BrowserRouter
из React Router для создания маршрутизатора, а затем определяем маршруты, используя компоненты Route
. Каждый маршрут соответствует определенному пути и компоненту, который будет отображаться при переходе на этот путь.
Компонент Switch
позволяет выбрать только один маршрут для отображения при каждом переходе по URL-адресу.
Для выполнения навигации между маршрутами в приложении можно использовать компонент Link
из библиотеки react-router-dom
. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Link } from 'react-router-dom'; function Header() { return ( <nav> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> </nav> ); } |
Компонент Link
генерирует ссылки, которые позволяют перейти на соответствующий маршрут без перезагрузки страницы.