Как в React правильно загржать часть страницы при неизменной другой части при смене url?

В React существует несколько способов загрузки части страницы при неизменной другой части при смене URL.

1. Использование роутинга: Один из самых популярных способов управления навигацией в React - это использование библиотеки роутинга, такой как React Router. React Router предоставляет набор компонентов и методов для определения маршрутов и управления навигацией в вашем приложении. Вы можете определить различные маршруты и привязать к ним компоненты, которые должны быть отображены при соответствующих URL. Таким образом, часть страницы будет перерисовываться только при изменении URL, а остальная часть останется неизменной.

Пример использования React Router:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
};

export default App;

2. Использование условной рендеринга: Если вам не требуется сложной навигации и вам нужно загрузить только часть страницы при изменении URL, можно использовать условный рендеринг компонентов. Вы можете создать переменную состояния, которая будет хранить текущий URL, и затем на основе этой переменной определить, какую часть страницы нужно отобразить.

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

import React, { useState, useEffect } from 'react';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;

const App = () => {
  const [currentUrl, setCurrentUrl] = useState(window.location.pathname);

  useEffect(() => {
    const handleRouteChange = () => {
      setCurrentUrl(window.location.pathname);
    };

    window.addEventListener('popstate', handleRouteChange);

    return () => {
      window.removeEventListener('popstate', handleRouteChange);
    };
  }, []);

  return (
    <div>
      {currentUrl === '/' && <Home />}
      {currentUrl === '/about' && <About />}
      {currentUrl === '/contact' && <Contact />}
    </div>
  );
};

export default App;

Обратите внимание, что в этом примере мы используем хук useEffect для добавления слушателя события 'popstate', который срабатывает при изменении URL. Метод setCurrentUrl вызывается для обновления переменной состояния currentUrl и вызывает перерисовку компонента.

Если вам нужно загрузить данные с бэкенда при изменении URL, вы можете использовать хуки, такие как useEffect или useLayoutEffect, для выполнения асинхронных запросов и обновления состояния компонента при получении данных.

В зависимости от конкретных требований вашего приложения и его архитектуры, вы можете выбрать один из этих способов или комбинировать их для достижения желаемого результата.