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

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

greyson

от greyson , в категории: JavaScript , 2 года назад

58 | 0

сделатьсайт

2 ответа

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

richard

от richard , 2 года назад

@greyson

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

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

Установить библиотеку React Router:

1	npm install react-router-dom

Создать маршруты для каждой страницы:

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>
  );
}

Создать компоненты для каждой страницы:

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

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

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

1 | 0

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

maya

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

@greyson

Также можно использовать библиотеку React-Redux для управления состоянием приложения. Это позволяет обновлять только те части страницы, которые действительно изменились, без перезагрузки всей страницы. Для этого необходимо:

Установить библиотеку React-Redux:

1	npm install react-redux

Создать файл store.js, в котором будет храниться состояние приложения:

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

Создать файл reducers.js, в котором будет находиться корневой редюсер:

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

// Добавьте сюда свои собственные редюсеры

const rootReducer = combineReducers({
  routing: routerReducer,
  // ...
});

export default rootReducer;

Добавить провайдер React-Redux внутри корневого компонента вашего приложения:

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      {/* Ваше приложение */}
    </Provider>
  );
}

export default App;

Использовать хуки useSelector и useDispatch для получения и изменения состояния внутри ваших компонентов. Например:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increaseCounter } from './actions';

function CounterComponent() {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();

  const handleButtonClick = () => {
    dispatch(increaseCounter());
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={handleButtonClick}>Increase Counter</button>
    </div>
  );
}

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

0 | 0

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

2 ответа

Похожие обсуждения: