Как работает обслуживание разных страниц в React?

Это делается с помощью реактивного маршрутизатора, который управляет маршрутизацией с помощью История API браузера.

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

Маршрутизация в javascript управляется с помощью Состояние отправки HTML5. Таким образом, каждый раз, когда вы щелкаете ссылку и переходите на другой маршрут, используется история браузера и состояние отправки. Это основа маршрутизации почти во всех одностраничных приложениях.

Пока вы не обновите страницу, ваш запрос не будет отправлен на сервер. Следовательно, index.html обслуживается только один раз, после чего маршрутизатор (в данном случае реагирующий маршрутизатор) берет на себя управление и управляет маршрутизацией в URL-адресе, используя API истории браузера.

Надеюсь это поможет !

вы можете использовать react-router-dom вот так

<Switch>
<Route exact path = "/" component = {Home}/>
<Route path = "/someurl" component = {ComponentForSomeUrl}
</Switch>

и визуализировать его с помощью BrowserRouter

но вы можете использовать что-то вроде history.push, на мой взгляд, react-router-dom действительно прост и лучше, чем react-router

вам не нужно отправлять html-файл по определенному маршруту, в случае, если экспресс-реакция используется для создания API (в большинстве случаев)

В папке React, которую вы хотите сделать npm install --save react-router-dom.

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

Убедитесь, что вы никогда не устанавливаете React Router отдельно.

Библиотека react-router в том виде, в каком она опубликована на npm, является основной библиотекой всего внутри общего проекта React Router.

Итак, внутри react-router есть основная навигационная логика. Он решает, как работать с React, как менять контент в зависимости от разных правил и какой-то другой низкоуровневой логики.

Чтобы получить реальную реализацию, поскольку она работает именно в браузере, установите react-router-dom.

Поэтому каждый раз, когда вы хотите использовать React Router в проекте для управления навигацией, всегда устанавливайте react-router-dom, а не react-router.

Есть и другие проекты с похожими названиями, которые, возможно, вам понадобятся, react-router-native для использования внутри проектов React Native.

В веб-приложениях мы используем react-router-dom, а не нативные мобильные приложения.

React-router-native предназначен только для нативных мобильных приложений.

Для браузера вы всегда хотите react-router-dom, а не react-router-native

Так что, возможно, в вашем компоненте App.js вы хотите настроить что-то вроде этого:

import React from "react";
import { BrowserRouter, Route } from “react-router-dom”;

const App = () => {
  return <div>App</div>;
};

export default App;

Я также рекомендую, если вы новичок в React Router, ознакомиться с ним, настроив что-то временное, например:

import React from "react";
import { BrowserRouter, Route } from “react-router-dom”;

const PageOne = () => {
    return <div>PageOne</div>;
};

const PageTwo = () => {
    return <div>PageTwo<button>Click Me</button></div>;
};

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path=“/” exact component = {PageOne} />
           <Route path=“/pagetwo”  component = {PageTwo} />
        </div>
           </BrowserRouter>
    </div>
   );
};

Посетите свой localhost:3000, а затем localhost:3000/pagetwo, проверьте, как все это работает.

Когда мы посещаем страницу с именем localhost:3000 и вводим этот адрес в URL-адрес, приложение загружается.

Сам React Router не заботится обо всем этом URL-адресе, вместо этого React Router заботится только обо всех символах, которые перечислены после имени домена или определения порта.

Localhost:3000 интерпретируется как localhost:3000/

Если я перехожу к localhost:3000/, мое приложение все равно загружается.

Теперь у меня есть другие примеры, если я перейду к localhost:3000/pageone, React Router заботится обо всем только после порта и домена.

То же самое, если бы я перешел к airbnb.com/listings/spain, реагирующий маршрутизатор будет учитывать только /listings/spain при принятии решения о том, какой контент отображать на экране.

Обратите внимание, что в приведенном выше примере я создал экземпляр BrowserRouter, а BrowserRouter создает собственный объект, известный как объект истории.

Этот объект истории просматривает URL-адрес внутри адресной строки и извлекает только ту часть URL-адреса, о которой заботится реагирующий маршрутизатор.

Затем объект истории будет передавать этот путь BrowserRouter, который сообщает этот путь обоим компонентам Route, и эти компоненты Route решают, показывать себя или скрывать себя в зависимости от пути, который посещает пользователь, и свойства пути, которое было передано. когда он был создан.