В вашей папке 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.
В веб-приложениях мы используем response-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 внутри адресной строки и извлекать только чтоt часть URL, на которую реагирует маршрутизатор, заботится.
Затем объект истории сообщит этот путь к BrowserRouter, который сообщит этот путь обоим Route компонентам, и эти Route компоненты решат, будет липоказать себя или спрятаться в зависимости от пути, который посещает пользователь, и свойства пути, который был передан при его создании.