Если вы здесь исключительно по шаблону, здесь. Я понимаю, что испытываю сильное отвращение к чрезмерной прокрутке, поэтому пользуйтесь этой функцией без прокрутки.

Если вы начинаете с нуля.

Для начала создайте базовое приложение для реагирования npx create-react-app “INSET_APPNAME_HERE”. Это предоставит вам базовую структуру, необходимую для начала создания вашего портфолио. Оттуда npm install && npm start или yarn install && yarn start. Теперь ваше приложение активно на локальном сервере и готово к открытию в предпочитаемом вами текстовом редакторе.

В результате должен получиться шаблон приложения, похожий на этот…

Если у вас уже есть приложение React.

Запустите командную строку npm install react-router-dom или yarn add react-router-dom в своем приложении реакции. Это устанавливает пакет, который позволяет вам импортировать функции маршрутизатора в ваше приложение.

Следующие несколько шагов, я собираюсь предоставить одну общую структуру для построения ваших маршрутов реакции. Однако, как лаконично выразился Дан Абрамов, файловая структура полностью зависит от вас. Если это не подходит вам или вашему проекту, сделайте иначе.

Шаг 1: BrowserRouter, Route и NavLink.

import React, {Component, Fragment} from ‘react’
import {BrowserRouter as Router, Route, NavLink} from ‘react-router-dom’

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

Если у вас есть привычка и / или настроение, чтобы понимать, что делает код, который вы добавляете в свое приложение, вот отличное (и краткое) объяснение:

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

NavLink - идентичен компоненту Link собственного маршрутизатора реакции, за исключением того, что он разрешает дополнительные функции стилизации.
BrowserRouter as Router - позволяет вам неявно ссылаться на BrowserRouter, вместо этого называя его Router. Независимо от того, сделаете вы это или нет, вы все равно будете использовать BrowserRouter. Цель переименования - чисто синтаксический сахар.

После применения вы можете ожидать, что ваши три компонента будут выглядеть примерно так…

<Fragment/> - это унаследованный компонент React, который позволяет отображать несколько дочерних элементов без необходимости заключать каждого из них и родительский элемент в <div/>.

Шаг 2: компонент, рендеринг или дочерние элементы.

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

На данный момент вам необходимо ознакомиться с тремя методами визуализации:

1. Мы используем <Route render/>, когда хотим использовать возможности анонимной функции для передачи реквизитов - будь то реквизиты из состояния или свойства из самого маршрута (например: использование «URL» для создания дополнительных ссылок или « путь », чтобы построить больше маршрутов).

2. Мы используем <Route component/>, когда хотим отрендерить компонент (замечательно, я знаю) или заранее объявленную функцию. Каждый раз, когда щелкают по маршруту с методом рендеринга компонента, он повторно отображает (или монтирует и размонтирует) компонент / функцию. Так что, в зависимости от вашей производительности и / или целей сайта, помните об этом при разработке своего портфолио.

3. Мы используем <Route children/>, когда хотим отобразить компонент или функцию независимо от того, совпадает ли маршрут - обычно используется для стратегических решений пользовательского интерфейса. Метод рендеринга дочерних элементов получает все те же свойства маршрута, что и рендеринг и компонент, за исключением случаев, когда компонент не соответствует маршруту; тогда его значение URL-адреса совпадения будет match: null.

Хотя в этой статье мы будем использовать только первые два, метод рендеринга дочерних элементов может быть полезен, если вы хотите одновременно рендерить компоненты, отключенные от пути или URL-адреса маршрута.

Шаг 3: точные, совпадающие и вложенные маршруты.

Exact - это логическое свойство <Route/>, которое позволяет указать, будет ли компонент отображаться каждый раз, когда маршрут включает совпадение, по сравнению с каждым совпадением маршрута точно . Разница выглядит примерно так…

<Route path='/blogs' component={ Blog } />
<Route path='/blogs/thebestblog' component={ BlogPost } />
<Route path='/blogs/thebesterblog' component={ BlogPost }/>

Каждый раз, когда будут отображаться best и bester, будет отображаться и компонент Blog. Если мы включим точное, то ...

<Route exact path=’/blogs’ component={ Blog } />

… Мир становится лучше, нежелательные родительские компоненты ускользают от чтения BlogPost.

Хорошо. Итак, Nested Routes.

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

В первом маршруте выше: мы создаем aNested Route, чтобы передать наши проекты нашему Компоненту Портфолио, чтобы мы могли отображать наши работы, вдохновленные Pink Floyd, для всех.

Во втором маршруте выше: мы создаем Nested Route для передачи наших проектов и свойств маршрутизатора (совпадение, местоположение и история) нашему компоненту проекта. Это позволяет нам перебирать каждый из наших проектов, которые вы увидите ниже.

match - одно из трех свойств маршрута (два других - history и location). match позволяет получить информацию о том, как <Route path> соответствует URL-адресу, включая такие свойства, как:

  • params объект - пары ключ / значение, извлеченные из динамического сегмента URL; например: id в этом <Route path=”/giraffes/:id” /> создает объект param.
  • isExact (логическое - был ли совпадать весь URL-адрес?)
  • путь (строка - предоставляет полный путь URL-адреса; помогает при создании Routes)
  • URL (строка - предоставляет совпавшую часть URL-адреса; помогает при создании NavLinks)

Здесь мы берем нашу projects опору и нашу match опору маршрутизатора, деструктурируем их в переменные, берем параметр id из объекта match param и отображаем их в самом революционном элементе HTML, <h1/>.

Чтобы начать, возьмите шаблон здесь.