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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

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

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

от maya , 4 месяца назад

@greyson 

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

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


  1. Создать файл store.js, в котором будет храниться состояние приложения:
1
2
3
4
5
6
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;


  1. Создать файл reducers.js, в котором будет находиться корневой редюсер:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

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

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

export default rootReducer;


  1. Добавить провайдер React-Redux внутри корневого компонента вашего приложения:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';

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

export default App;


  1. Использовать хуки useSelector и useDispatch для получения и изменения состояния внутри ваших компонентов. Например:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
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>
  );
}


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