＜React-Router＞Сверхполные знания по реагированию на маршрутизацию (переход, передача параметров, дополнительная маршрутизация, перенаправление и т. д.)

Оглавление

1. Создайте среду проекта с именем проекта boke (настраиваемым) и языком редактирования документа TypeScript.

2. Установите все зависимости в package.json ---- установочный пакет (обратите внимание на [имя проекта cd], чтобы войти в файл установки проекта)

3. Добавьте маршрут React-Router

4. Модификация и построение файлов и каталогов.

2. Ленивая загрузка маршрутов

3. Прыжок по маршруту

1. Переход по тегу (декларативный переход) --- тег, тег ссылки.

2. Программный переход ---useNavigate

4. Передача параметров маршрутизации

1. Передача параметров URL-адреса. Используйте навигацию напрямую.

2.передача параметров состояния (обычно используется)

3.параметры передачи параметров

5. Символ конфигурации «*»

6. Вложение маршрутов

1.Метод 1

(1) Добавьте «/*» после родительского маршрута, чтобы указать, что могут быть подкомпоненты.

(2).Настройте параметры дополнительной маршрутизации.

(3). Импортируйте дочерний файл маршрутизации в родительский файл маршрутизации.

2.Метод 2

3. Меры предосторожности

7. Перенаправление маршрута

1.Метод 1

2.Метод 2

3. Способ третий

8. Аутентификация маршрута

Способ 1: передача параметров компонента

Способ 2: слот

1. Конфигурация среды маршрутизации

1. Создайте среду проекта с именем проекта boke (настраиваемым) и языком редактирования документа TypeScript.

create-react-App boke --template typescript

2. Установите все зависимости в package.json ---- установочный пакет (обратите внимание на [имя проекта cd], чтобы войти в файл установки проекта)

npm i

3. Добавьте маршрут React-Router

(a)ts开发情况下，  下载模块"react-router-dom"和 "@types/react-router-dom"

npm i --save react-router-dom @types/react-router-dom

(b)js开发情况下,    只需下载模块"react-router-dom"

Расширения:

--save -dev: некоторые шаблоны работают только на стадии разработки и не будут упакованы при упаковке проекта, что указывает на то, что загруженный пакет не зависит от проекта, сокращение -D
--save указывает, что это необходимо на этапе разработки, а также упаковывается упаковка проекта. (npm версии 5.6 или выше, загрузка по умолчанию — сохранение) Сокращение -S

Обратите внимание, что эта статья была написана в соответствии со следующими номерами версий:

4. Модификация и построение файлов и каталогов.

Оставьте только файлы App.tsx и index.tsx в каталоге файлов src, спроектируйте и создайте маршрутизатор папки маршрутизации, представления папок страниц веб-сайта, создайте новые файлы: домашняя страница (домашняя страница), пользователь (личная центральная страница), ошибка (не введите URL) Страница, открытая при возникновении ошибки).

Приложение.tsx:

индекс.tsx:

Настроить файлы маршрутизации (ниже написана только маршрутизация первого уровня)

Среди них " / quot; означает, что после порта ничего не вводится или вводится только номер. " / "

Среди них " / * quot; означает нет Может соответствовать введенной странице

2. Ленивая загрузка маршрутов

out out out out, если мы импортируем все страницы, как указано выше, при упаковке проекта все коды веб-страниц будут упакованы, что является большой тратой ресурсов памяти. Мы можем использовать отложенную загрузку маршрутизации (файл будет упакован только тогда, когда пользователь вводит URL-адрес) ————>React, lazy()

Вот несколько тегов:<Suspense> компоненты-заполнители. Если компонент отложенной загрузки еще не загружен, используйте компонент-заполнитель Сначала отображение битового компонента. Существует резервный атрибут, а передаваемый компонент является компонентом-заполнителем. «Приостановка» означает, что компонент загружается лениво. Чтобы определить, загружается ли он лениво, проверьте, является ли это React.lazy().

3. Прыжок по маршруту

Переходы по маршруту имеют переходы по меткам — декларативные переходы, переходы, реализованные с помощью программ ts и js, — это программные переходы.

1. Переход по тегу (декларативный переход) --- тег, тег ссылки.

Путь перехода: «/user» начинается с косой черты, указывающей относительный корневой путь. Корневым корнем текущего URL-адреса является порт 3000. Напишите «/user» непосредственно после порта 3000.

Вопрос: В чем разница между переходом по метке и переходом по ссылке?

В качестве сетевого подключения тег a повторно запрашивает веб-страницу, вызывая ее обновление, в то время как тег ссылки использует только операции DOM для переключения тегов на странице и переключения компонентов через URL-адрес.

2. Программный переход ---useNavigate

useNavigate (пользовательский крючок платформы маршрутизации, официально не предоставляемый React)

4. Передача параметров маршрутизации

Прежде чем говорить о параметрах маршрутизации, давайте сначала разберемся, как получить текущую информацию о маршрутизации.

  //导入
  import {useNavigate, useLocation, useParams } from 'react-router-dom'
  
  let navigate = useNavigate()
  // /* 手写实现获取到url中？后的参数信息 */
  let localtion = useLocation()
  let params = useParams()
  console.log(localtion, params, "--------------");
  // //localtion路由信息对象
  // //params针对于state传参

объект локализации

Параметры маршрутизации часто встречаются при разработке нашего проекта. Например, когда продукт нажимает, чтобы перейти на страницу сведений, а страницы сведений о разных продуктах различаются, содержимое различается. Когда мы отправляем сетевой запрос для получения подробной информации о кликнул товар, наш маршрутный переход При передаче передаются параметры, а затем отправляются на бэкенд.Бэкенд определяет и возвращает данные на фронтенд.

Итак, как передать параметры для маршрутизации? Мы имитируем нажатие на товар для входа на страницу сведений, используя поддельные данные.

1. Передача параметров URL-адреса. Используйте навигацию напрямую.

При переходе параметры находятся в URL-адресе, а целевые параметры необходимо анализировать вручную.

Вот еще один небольшой момент для расширения знаний. Рукописная функция анализирует строку запроса URL-адреса. Параметры после «?» в URL-адресе можно получить следующим образом.

  /* 手写实现获取到url中？后的参数信息 */
  let localtion = useLocation()
  let params = useParams()
  console.log(localtion, params, "--------------");
  //localtion路由信息对象
  //params针对于动态路由传参--params传参
  let queryobj:any={}
  localtion.search.split("?")[1].split("&").forEach(el=>{
    var arr=el.split("=")
    queryobj[arr[0]]=arr[1]
  })
  console.log(queryobj);

2.передача параметров состояния (обычно используется)

Преимущества параметров передачи состояния:параметров передачи состояния, пользователь нажимает на продукт, чтобы перейти на страницу сведений (две страницы напрямую связаны), и данные о состоянии будут хранится в кеше. Это не похоже на передачу параметров URL-адреса и объединение их с URL-адресом (обратите внимание, что это переход по маршрутизации, реализуемый одной и той же страницей браузера. Этот кеш похож на sessionStorage, и кешированные данные не используются в разных браузерах Когда в это время есть другие люди. При прямом поиске по этой ссылке данные о параметрах состояния отсутствуют.

Данные параметра получаются путем передачи параметра состояния, а значение получается напрямую с помощью location.state.

3.параметры передачи параметров

    /* 第三种 params传参(动态路由传参) */
    navigate("/user/0315")

Первый пользователь данных представляет маршрут, а вторые данные 0315 представляют параметры. Параметры передачи параметров также называются передачей параметров динамической маршрутизации, и параметры помещаются в URL-адрес. Вставьте его в пароль.

Необходимо выполнить три местных условия

(1) Регистрация————":"Переменная после двоеточия указывает на переменную, в которой сохраняются параметры

(2) Переход – формат перехода соответствует формату регистрации.

(3) Для приема требуется прием параметров.

5. Символ конфигурации «*»

<Route path="/*” element={<comment/>}></Route>

" * " означает, что другие маршруты не сопоставлены, и компонент после «символа конфигурации» будет сопоставлен. (Обратите внимание, что он был изменен. Раньше этот символ указывал на то, что маршрут, написанный перед этим символом, не был сопоставлен. Компонент этого символа был сопоставлен, и последующие маршруты не будут сопоставлены. Поэтому ранее необходимо было пропишите маршрут "*" Наконец, теперь он не имеет никакого эффекта, его можно разместить где угодно)

6. Вложение маршрутов

1.Метод 1

(1). Добавьте**quot; / * "** после родительского маршрута, чтобы указать, что могут быть подкомпоненты

(2).Настройте параметры дополнительной маршрутизации.

(3). Импортируйте дочерний файл маршрутизации в родительский файл маршрутизации.

2.Метод 2

Помимо настройки подмаршрутов в отдельном файле, мы также можем настроить подмаршруты непосредственно в файле родительского компонента маршрутизации, что имеет преимущество удобного управления. Тот же родительский маршрут необходимо добавить с помощью «/*».

3. Меры предосторожности

«/*» необходимо добавить после родительского маршрута, потому что только когда вы вводите родительский маршрут — код компонента родительской маршрутизации, у вас есть возможность загрузить дочерний код маршрутизации в родительский файл маршрутизации.
Режим маршрутизации <Router>__BrowserRouter будет включен только в корневом маршруте, а на всем веб-сайте он только один.

7. Перенаправление маршрута

1.Метод 1

2.Метод 2

3. Способ третий

8. Аутентификация маршрута

Используя перенаправление маршрута, вы можете добавить условия оценки для реализации аутентификации маршрута. Например, после входа в систему мы кэшируем токен в кеше браузера. Мы также используем, содержит ли кеш браузера токен, чтобы определить, есть ли в данный момент пользователь вошли в систему. На некоторых страницах, если вы не вошли в систему, вам нужно перейти на страницу входа, чтобы войти в систему.

Компоненты инкапсулирующей функции используются для аутентификации маршрутизации.