react-draggable

React Router После многих версий разработки он теперь прибыл React Router 6。Хоть и написано в Интернете React-Router Существует множество руководств по самой маршрутизации, но на самом деле, когда дело доходит до React-Router 6 Не так много. В то же время из-за 6 В этой версии представлено множество новых концепций, а также широко используется Крючок, многие старые руководства в Интернете уже непрактичны. В этой статье мы Подведем итог Маршрутизатор React Router 6изиспользование,Используйте примеры, чтобы проиллюстрировать, как реализовать различные сценарии и требования.,Например программный прыжок и т.д..

React Router 6

В Kara Cloud мы также используем множество React-Router 6. Поэтому в процессе объяснения мы будем использовать некоторые практические примеры для иллюстрации проблемы, но основные примеры этой статьи будут помещены репозиторий GitHubсередина,Для справки. Если вы найдете это полезным,Возможно, вы захотите поделиться и добавить звезды.,или существовать в блоге ссылки на эту статью,Пусть больше людей увидят это.

Пожалуйста, обратитесь к другим отличным урокам из этой серии.

• Учебник по таблицам React
• Учебное пособие по перетаскиванию React
• Компоненты React Rich Text

Конечно, если вы хотите быстро построить серверную систему, также рекомендуется попробовать Kara Cloud, которая избавит вас от необходимости разработки и обслуживания клиентской и серверной частей.

Что такое React-маршрутизатор

понять Что такое React-маршрутизатор Мы должны сначала понять, что такое SPA (Single Page Приложение), также известное как одностраничное приложение.

Каждое одностраничное приложение на самом деле представляет собой серию JS файл, когда пользователь запрашивает веб-сайт, веб-сайт возвращает весь (или серию) js файлы и HTML, и когда пользователь нажимает на страницу, вам нужно сообщить браузеру, как загрузить адрес другой страницы. Одностраничные приложения обычно имеют только один index.html файл, поэтому он поставляется вместе с браузером <a> Связь tag Его нельзя использовать для перехода к одностраничным приложениям, поэтому вам понадобится React Реализация маршрутизации в .

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

React-Router от 2014 Он начал разработку в 2016 году и уже испытал 6 Вторая основная версия версии, пока пользователи Приходить смотрят, Netflix, Twitter, Discord Ждем, пока крупные производители одобряют его один за другим, поэтому React-Router По сути, это стало React середина做路由из Параметры по умолчанию。Если ты сейчассуществоватьвозвращатьсясуществовать Используйте старыеиз Версия,Хотите обновить,Тогда вы можете обратиться кРуководство по обновлению,В противном случае вы можете обратиться к этой статье шаг за шагом.

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

пример реагирования-маршрутизатора

Хотя это приложение выглядит простым, оно содержит общие функции и API React-Router, в том числе

• BrowserRouter
• Link
• Routes
• Route
• Outlet

и т. д.

Как установить React-Router

Установить React-Router очень просто. Если вы используете Yarn или npm, просто используйте обычный метод установки.

Давайте сначала воспользуемся им create-react-app Строительные леса строят app Приходить

npx create-react-app react-router-6-tutorial

Затем установите его с помощью npm

Если вы используете npm, это

npm install react-router-dom@6

установка пряжи

yarn add react-router-dom@6

так react-router Он установлен. Обратите внимание, что если в web Если да, то вам нужно react-router-dom вместо react-router этот Сумка。Они разныеда,后者Сумка含了 react-native Некоторые компоненты, необходимые в . Если вам нужно только создавать веб-приложения, просто используйте первый.

React Router API

React Router из API существоватьэтоизОфициальная документацияБолее четко это было представлено выше,Здесь мы просто Подвести Итог Вот несколько возможных вариантов использования из API。специфическийизиспользованиесуществовать下文середина我们详细Приходитьговорить,Это просто для справки,Если у вас возникнут проблемы, вы можете это проверить.

BrowserRouter

существовать React Router средний, самый внешний слой из API Обычно просто используйте BrowserRouter。BrowserRouter во внутренней реализации используется history Эта библиотека и React Context Приходитьвыполнитьиз,Итак, когда вы выходите из пользователя, идете вперед и назад,history Эта библиотека запомнит историю пользователя, и вы сможете использовать ее напрямую, когда вам нужно будет перейти.

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

import ReactDOM from 'react-dom'
import * as React from 'react'
import { BrowserRouter } from 'react-router-dom'
import App from './App`

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
, document.getElementById('app))

Route

Route Используйте «Приход», чтобы определить путь доступа с помощью React Отношения между компонентами. Например, если вы хотите, чтобы пользователи посещали https://your_site.com/about из времени загрузки <About /> этот React страница, то вам нужно использовать Route:

<Route path="/about" element={<About />} />

Routes

Routes Это использование Прихода для обертывания пути доступа к маршрутизации (Route)из. Он определяет, что будет соответственно загружено при вводе данных пользователем в браузере. React компоненты, поэтому в большинстве случаев Routes Единственная функция из — обернуть серию из с помощью Прихода. Route,Например, следующим образом

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

существоватьздесь,Routes сказал React Router Всякий раз, когда пользователь обращается к корневому адресу, загружайте Home эту страницу, и когда пользователь посещает /about когда, загрузить <About /> страница.

Практический пример React Router

существующий, мы представили его выше React Router из API, в остальной части текста мы используем пример Прихода, чтобы проиллюстрировать, как его использовать. React Router。

Сначала мы создаем несколько страниц

<Home />

<About />

<Dashboard />

Home использовать于展示一个简单изсписок навигации,AboutИспользуется для отображения страницы сведений,и Dashboard Пользователям необходимо войти в систему, прежде чем они смогут получить доступ.

Сначала создаем новый router.js файл и существует, который загружается хорошо React-Router компоненты

import './App.css';
import { BrowserRouter, Route, Routes } from "react-router-dom"

function App() {

  return <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  </BrowserRouter>
}

const Home = () => {
  return <div>hello world</div>
}

export default App;

Здесь мы непосредственно существуем App.js плюс один позвонил Home изкомпоненты, которые просто отображаются hello wolrd Вот и все. После Прихода мы напишем два других пути и добавим их. About и Dashboard два компонента

import './App.css';
import { BrowserRouter, Route, Routes } from "react-router-dom"

function App() {

  return <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/dashboard" element={<Dashboard />} />
    </Routes>
  </BrowserRouter>
}

const Home = () => {
  return <div>hello world</div>
}

const About = () => {
  return <div>здесьда Караюниз Домашняя страница</div>
}

const Dashboard = () => {
  return <div>Сегодняшние активные пользователи: 42</div>
}

export default App;

В это время, когда мы переключаемся на / или /about или /dashboard , будут отображены соответствующие компоненты. Обратите внимание, что существует каждое из вышеперечисленных Route в, использовать element Товар будет передаваться по компонентам, пока существует path путь, указанный в элементе. существовать Route внешнее использование Routes Завершите весь список маршрутов.

напишите здесь,Мы фактически завершили базовую функцию маршрутизации.,Для подавляющего большинства общедоступных веб-сайтов (или внутренних систем),Это почти закончилось. но иногда,Возможно, вы захотите узнать путь существования пользователя.,Приход выполняет соответствующее отображение и специальную логическую обработку.,или вам необходимо аутентифицировать пользователя, прежде чем он сможет получить доступ к определенному пути.,Тогда вам нужно продолжить чтение следующих нескольких глав.

Как получить текущий путь к странице

каксуществовать React-Router Получить текущий доступ пользователя на странице по пути? На самом деле это очень просто, существовать React-Rotuer 6 , обеспечивает hook Хук, специально используемый для получения текущего пути. В приведенном выше примере из нам нужно только существование, соответствующее странице из, например: About в, добавь это hook Вот и все

Сначала мы импортируем useLocation этот перехватчик, а затем следуйте следующему коду, чтобы получить текущую позицию

import { useLocation } from 'react-router-dom'

const About = () => {
  // использовать hook
  const location = useLocation();
  const { from, pathname } = location

  return <div>здесьда Караюнизвеб-сайт,В настоящее время вы существуете {pathname}, вы от {from} 跳转过Приходитьиз</div>
}

Как установить путь к странице по умолчанию (например, к странице 404)

существоватьвыше списка маршрутизации Routes , мы можем добавить catch all страница по умолчанию, например Приход 404 страница.

Мы просто хотим существовать, чтобы присоединиться последними path для * путь,Значение для соответствует всем путям,Вот и все

function App() {

  return <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  </BrowserRouter>
}

// использовать Приходитьделатьдля 404 Страница из компонентов
const NotFound = () => {
  return <div>ты Приходить Пришёл без знанияиздикая местность</div>
}

Конечно, можно поставить 404 Страница должна быть лучше и выглядеть лучше. Например, если вы заходите на Караюн и нет существованияиз Связьиз, она получит 404. Страница выглядит следующим образом

Караюн 404 страница

Как аутентифицировать и защитить пути с помощью React Router

Подвести итог

В этой статье мы объясним, как использовать React-Router, проиллюстрированный примером React Router 6 серединаиз API,и общийизиспользовать Сцены и т. д.。