Как сделать роутинг в react.js без перезагрузки страницы?

Пользователь

от karen.wisozk , в категории: JavaScript , год назад

Как сделать роутинг в react.js без перезагрузки страницы?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jensen , год назад

@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 генерирует ссылки, которые позволяют перейти на соответствующий маршрут без перезагрузки страницы.

Пользователь

от narciso , 3 месяца назад

@karen.wisozk 

Дополнительно, для более гибкого управления состоянием и передачи параметров между маршрутами, в React Router также предоставляются возможности передачи параметров через URL, использование вложенных маршрутов, редиректов, а также защиты маршрутов с помощью приватных маршрутов.


Пример передачи параметра через URL:

1
<Route path="/user/:userId" component={UserDetails} />


В этом случае, при переходе на маршрут /user/:userId, параметр userId будет доступен компоненту UserDetails через props.


Пример использования вложенных маршрутов:

1
2
3
<Route path="/products" component={Products}>
  <Route path="/products/:productId" component={ProductDetails} />
</Route>


Здесь компонент Products будет отображаться на маршруте /products, а компонент ProductDetails будет отображаться на маршруте /products/:productId внутри компонента Products.


Пример использования редиректов:

1
2
3
<Route exact path="/old-url" render={() => (
  <Redirect to="/new-url" />
)} />


Этот код перенаправит пользователя с /old-url на /new-url.


Пример защиты маршрутов с помощью приватных маршрутов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    isAuthenticated ? (
      <Component {...props} />
    ) : (
      <Redirect to="/login" />
    )
  )} />
);

// Использование:
<PrivateRoute path="/dashboard" component={Dashboard} />


PrivateRoute принимает компонент и проверяет, авторизован ли пользователь. Если да, отображает указанный компонент, если нет, перенаправляет на страницу входа.


Эти возможности делают React Router мощным инструментом для создания сложного роутинга в React.js без перезагрузки страницы.