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

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

от greyson , в категории: JavaScript , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от richard , 7 месяцев назад

@greyson 

Для создания сайта без перезагрузки на React.js можно использовать библиотеку React Router. Она позволяет создавать одностраничные приложения (SPA), которые обновляют только необходимые части страницы, не перезагружая всю страницу целиком.


Для этого необходимо:

  1. Установить библиотеку React Router:
1
npm install react-router-dom


  1. Создать маршруты для каждой страницы:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

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


  1. Создать компоненты для каждой страницы:
1
2
3
4
5
6
7
function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}


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