Бесплатный графический видеоурок ReactRouter-V5 (бесплатно, если есть учебное заведение, выйду!)

React.js React Native

React-Router

В последнее время учебные заведения добавили меня в WeChat и QQ, чтобы оскорбить меня. Я размещал бесплатные видео. Что не так с вашим учебным заведением? Рынок такой большой, вы не можете зарабатывать деньги и не позволяете другим делать это добровольно. бесплатно? Каждую неделю я буду выдавать три серии бесплатных видеоуроков, цель — 1000 серий.

React Router — это мощная библиотека маршрутизации, созданная на основе React, которая позволяет быстро добавлять представления и потоки данных в ваше приложение, сохраняя при этом синхронизацию страниц и URL-адресов. Это официальное объяснение, хотя и достаточное, чтобы объяснитьReact Router, но я не думаю, что он уделяет этому плагину достаточно внимания. Насколько я знаю из моего текущего опыта работы, React Router требуется для всех проектов стека технологий React (WEB и Native). С его помощью вы можете создавать сложные приложения, и с его помощью приложения имеют чувство иерархии. Если нет React Router, разумно используемswitch...caseПо такой постановке судить и рендерить очень хлопотно, да и недоступно, но с React Router все становится проще.

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

  1. Бесплатное видеоруководство по React16 (всего 28 эпизодов)
  2. Бесплатное видеоруководство по Redux (всего 24 эпизода)

Если вы не изучили основы, я предлагаю вам сначала изучить эти два видеоурока.Если вы сертифицированы, вы сможете закончить его за один уик-энд (два дня), а затем вы вернетесь, чтобы прочитать эту статью с много легкости.

Если вы изучаете React, вы можете присоединиться к группе QQ: 159579268 и обсудить это с друзьями.

P00: Список видеоколлекций React Router

01. Установка React Router и создание базовой среды

02. Используйте ReactRouter как обычную веб-страницу

03. Динамическое значение ReactRouter-1

04. Динамическое значение ReactRouter-2

05.ReactRouter Redirect — использование перенаправления

06. Пример — вложенная маршрутизация ReactRouter — 1

07. Пример — вложенная маршрутизация ReactRouter — 2

08. Пример — вложенная маршрутизация ReactRouter-3

09. Динамически получать маршруты в фоновом режиме для настройки

P01: Установка React Router и построение базовой среды

В этом уроке мы сначала установим базовую среду для изучения и разработки React Router и сделаем простой пример.

использоватьcreact-react-appПроект инициализации строительных лесов

1. Если у вас не установлены инструменты для строительных лесов, вам необходимо установить:

npm install -g create-react-app

Если вы изучали предыдущие курсы, этот шаг обычно пройден и его можно пропустить.-gЭто означает, что система установлена ​​глобально.

2. Создайте проект напрямую с помощью инструмента создания лесов.

D:  //进入D盘
mkdir ReactRouterDemo   //创建ReactRouterDemo文件夹
cd ReactRouterDemo      //进入文件夹
create-react-app demo01  //用脚手架创建React项目
cd demo01   //等项目创建完成后，进入项目目录
npm  start  //预览项目

Этот проект готов, давайте удалим ненужные файлы и сведем структуру кода к минимуму. Удалить все файлы в SRC, оставив только одинindex.js,иindex.jsФайлы также очищаются.

использоватьnpmУстановите React-маршрутизатор

Затем вы можете открыть проект в своем инструменте редактирования кода, который я использую здесьVSCode, неважно, чем вы пользуетесь, но если вы новичок, то рекомендуется использовать тот же редактор, что и я, что может гарантировать такой же процесс демонстрации, как на видео. в соответствии сctrl+~Откройте терминал и введитеdemo01, в терминале используйтеnpmпрямая установкаReact Router.

npm install --save react-router-dom

После завершения установки вы можете перейти кpackage.jsonВзгляните на установленную версию, сейчас я устанавливаю5.0.1, Версия может отличаться, когда вы изучаете, и некоторые API могут быть неприменимы.Вы можете перейти на официальный сайт, чтобы просмотреть обучение API после начала работы.

Написать простую программу маршрутизации

Сначала мы переписываемsrcв каталоге файловindex.jsкод. Измените на следующий код, конкретное значение объясняется в видео:

import React from 'react';
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'

ReactDOM.render(<AppRouter/>,document.getElementById('root'))

настоящее времяAppRouterкомпоненты недоступны, мы можемsrcсоздать каталогAppRouter.jsфайл, а затем напишите следующий код.

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function Index() {
  return <h2>JSPang.com</h2>;
}

function List() {
  return <h2>List-Page</h2>;
}

function AppRouter() {
  return (
    <Router>
        <ul>
            <li> <Link to="/">首页</Link> </li>
            <li><Link to="/list/">列表</Link> </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/" component={List} />
    </Router>
  );
}
export default AppRouter;

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

P02: Используйте ReactRouter как обычную веб-страницу

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

Напишите компонент индекса

до/srcСоздайте папку в каталоге, я назвал ее здесьPages(вы можете назвать его как угодно), затем создайте файл компонентаIndex.js. Здесь мы полностью установим рабочий режим для записи, но бизнес-логики нет, и пользовательский интерфейс также достаточно прост. код показывает, как показано ниже:

import React, { Component } from 'react';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>JSPang.com</h2> );
    }
}
 
export default Index;

Компонент списка записи

законченныйIndexПосле компонента продолжайте писатьListкомпоненты. По сути, этот компонент иIndexВ основном то же самое. код показывает, как показано ниже:

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page</h2> );
    }
}
 
export default List;

ИсправлятьAppRouter.jsдокумент

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

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/List'

function AppRouter() {
  return (
    <Router>
        <ul>
            <li> <Link to="/">首页</Link> </li>
            <li><Link to="/list/">列表</Link> </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/" component={List} />
    </Router>
  );
}

export default AppRouter;

Теперь это кажется почти таким же, как наша реальная работа, и это также то же самое, что мы обычно пишем.htmlСтраница очень похожа.

exactточное совпадение

Это также вопрос, который мне задал друг, что такое точное совпадение? На самом деле это очень легко понять.Вы можете буквально угадать результат, то есть ваша информация о пути должна быть полностью сопоставлена, прежде чем переход может быть реализован.Частичное совпадение недопустимо.

Например, мы положилиIndexТочное совпадение удалено, вы обнаружите, что независимо от того, что вы вводите в адресную строку, оно может быть сопоставленоIndexкомпоненты, это не тот результат, который нам нужен.

<Route path="/" component={Index} />

Итак, мы добавили точное соответствиеexact. Вы можете попробовать посетить сноваListкомпоненты, для более глубокого изучения точного соответствия.

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

P03: динамическое значение ReactRouter-1

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

Установите на маршруте, чтобы разрешить передачу динамического значения

Этот параметр:начинается, за которым следует имя ключа (имя ключа), которое вы передаете. Давайте рассмотрим простой пример.

<Route path="/list/:id" component={List} />

Прочитав код, вы почувствуете, что он очень простой, т.pathплюс:id. Это устанавливает правила для разрешения передачи по значению.

Передать значение по ссылке

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

 <li><Link to="/list/123">列表</Link> </li>

Теперь вы можете передавать значения. Для того, чтобы облегчить ваше изучение, здесь всеAppRouter.jsкод.

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/List'

function AppRouter() {
  return (
    <Router>
        <ul>
            <li> <Link to="/">首页</Link> </li>
            <li><Link to="/list/123">列表</Link> </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/:id" component={List} />
    </Router>
  );
}

export default AppRouter;

Получение и отображение переданного значения в компоненте списка

Когда компонент получает переданное значение, его можно объявить в цикле объявленияcomponentDidMount, переданное значение находится вthis.props.matchсередина. Сначала мы можем распечатать его, код выглядит следующим образом.

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page</h2> );
    }
    //-关键代码---------start
    componentDidMount(){
        console.log(this.props.match)
    }
    //-关键艾玛---------end
}
 
export default List;

Затем в консоли браузера вы можете увидеть распечатанный объект, который состоит из трех частей:

  • patch: Правила маршрутизации, определенные вами, ясно показывают, что можно использовать параметр идентификатора источника.
  • url: реальный путь доступа, вы можете четко видеть, какие параметры переданы.
  • params: переданные параметры,keyиvalueценность.

Как только вы поймете свойства объекта в матче, вы сможете легко получить переданное значение идентификатора. код показывает, как показано ниже:

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page->{this.state.id}</h2> );
    }
    componentDidMount(){
       // console.log(this.props.match.params.id)
       let tempId=this.props.match.params.id
        this.setState({id:tempId })
    }
}
 
export default List;

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

P04: динамическое значение ReactRouter-2

Значения, передаваемые динамически в последнем классе, были жестко запрограммированы и не обладали гибкостью, но я много говорил о теории динамической передачи значений, которую можно рассматривать как предварительное понимание динамической передачи значений React Router. Этот урок визуально моделирует список динамических данных и передает значения в списке на страницу сведений. На самом деле, точки знаний этого класса уже были рассмотрены на предыдущем уроке, поэтому его можно рассматривать как небольшое упражнение. Что я должен повторить здесь, так это то, что вы не можете чему-либо научиться, просто посмотрев видео. Вы можете научиться, только посмотрев видео и напечатав эффект. Я искренне надеюсь, что вы сможете научиться этому здесь.

Имитация массива списков

теперь доступно вIndexВ компоненте моделируется массив списка, который эквивалентен содержимому, которое мы динамически получаем из фона, а затем массив включает в себя статьюcidиtitle. Установите его непосредственно при инициализации состояния, код выглядит следующим образом:

 constructor(props) {
    super(props);
    this.state = { 
        list:[
            {cid:123,title:'技术胖的个人博客-1'},
            {cid:456,title:'技术胖的个人博客-2'},
            {cid:789,title:'技术胖的个人博客-3'},
        ]
    }
}

имеютlistПосле массива снова измените пользовательский интерфейс для эффективного обхода,Renderкод показывает, как показано ниже.


 render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}> {item.title} </li>
                    )
                })
            }
        </ul>
    )
}

Список уже доступен наIndexКомпонент отображается, а затем вы можете настроить его<Link>Теперь перед настройкой необходимо представитьLinkкомпоненты.

import { Link } from "react-router-dom";

После введения вы можете использовать его, чтобы прыгать напрямую, но вам нужно обратить внимание на одну вещь, используйте{}форма, то естьtoСодержимое внутри анализируется в виде JS, так что значение может быть передано плавно.

render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}>
                            <Link to={'/list/'+item.uid}> {item.title}</Link> 
                        </li>
                    )
                })
            }
        </ul>
    )
}

До сих пор это было очень похоже на список в нашем проекте для передачи значений на страницу сведений. Для облегчения учебы дайтеIndex.jsвсех кодов.

import React, { Component } from 'react';
import { Link } from "react-router-dom";

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                {uid:123,title:'技术胖的个人博客-1'},
                {uid:456,title:'技术胖的个人博客-2'},
                {uid:789,title:'技术胖的个人博客-3'},
            ]
         }
    }
    render() { 
        return ( 
            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <li key={index}>
                               <Link to={'/list/'+item.uid}> {item.title}</Link> 
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
}
 
export default Index;

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

P05: ReactRouter Redirect — использование перенаправления

Во время написания этого о, я посмотрел на некоторые связанныеReact Router RedirectСтатьи очень громоздкие.На самом деле, я считаю, что написание вводной статьи - это не показ техники, а чтобы другие увидели, сделали, а в будущем могут углубиться. Если вы сможете выполнить эти три пункта, это будет хорошая статья. я думаюRedirect(перенаправление), вы можете освоить основные два пункта знаний.

  • Перенаправление с вкладками: использовать<Redirect>Тег для редиректа, рекомендуется использовать, когда бизнес-логика не сложная.
  • Программное перенаправление: это метод программирования, обычно используемый в бизнес-логике, такой как успешный вход в систему и запрос на страницу центра участников.

Существует важное различие между перенаправлением и переходом, то есть тип перехода может использовать кнопку «Назад» браузера для возврата на предыдущий уровень, но перенаправление не разрешено.

Перенаправление с вкладками

Обычно это используется в не очень сложной бизнес-логике, например, когда мы вводимIndexкомпоненты, тоIndexкомпонент, перенаправить непосредственно наHomeкомпоненты. Мы также комбинируем этот сценарий, чтобы увидеть, как его можно реализовать.

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

import React, { Component } from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>我是 Home 页面</h2> );
    }
}
 
export default Home;

Эта страница очень проста, обычный компонент с состоянием.

После того, как у вас есть компоненты, вы можете настроить правила маршрутизации, т.AppRouter.jsРига один<Route>Конфигурация, не забудьте импортировать при настройкеHomeкомпоненты.

import Home from './Pages/Home'
<Route path="/home/" component={Home} />

открыть послеIndex.jsфайл, изIndexКомпонент перенаправляет наHomeкомпонент, который необходимо импортировать в первую очередьRedirect.

import { Link , Redirect } from "react-router-dom";

вводитьRedirect, прямо вrenderЕго можно использовать в функции.

 <Redirect to="/home/" />

Теперь можно реализовать перенаправление страницы.

Программное перенаправление

Программное перенаправление просто не использует преимущества<Redirect/>теги, но напрямую использоватьJSСинтаксис реализует перенаправление. Обычно он используется в ситуациях, когда бизнес-логика сложна или требуется несколько оценок. Мы не будем здесь моделировать сложные сценарии, а воспользуемся приведенным выше примером для его реализации, чтобы каждый мог увидеть результат.

Например, прямо в конструктореconstructorДобавьте код перенаправления ниже.

 this.props.history.push("/home/");

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

P06: Пример — вложенная маршрутизация ReactRouter-1

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

Мы научимся им пользоваться через несколько уроковReact RouterЭто также небольшой пример.В этом процессе мы рассмотрим предыдущие знания о маршрутизации и используем их для построения некоторых сложных отношений маршрутизации.

案例草图

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

воссоздать проектDemo02, введите непосредственно в VSCode, следующая команда инициализирует код проекта.

create-react-app demo02

Этот проект создан, но есть много файлов, которые временно не нужны, удалите их и сведите структуру кода к минимуму. оставить только/srcв каталогеindex.jsфайл, а затем удалить некоторыеindex.jsБесполезный код в файле.

После инициализации проекта установите его сноваReact Router,использоватьnpmДля установки (не забудьте зайти в папку Demo02 при установке).

npm install --save react-router-dom

Инициализировать базовый каталог

Согласно эскизному анализу, существует два уровня отношений, которыми можно управлять: первый уровень — это категория, а второй уровень — это подкатегория. Сначала, а затем/srcсоздать каталогPagesпапка. затем в/PagesСоздайте еще два каталога в каталоге/videoи/workPlace, затем в/srcсоздать каталогAppRouter.jsфайл в качестве файла конфигурации для домашней страницы и маршрутизации. Структура каталогов следующая:

- src
|--Pages
   |--video
   |--workPlace
|--index.js
|--AppRouter.js

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

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    <li><Link to="">视频教程</Link> </li>
                    <li><Link to="">职场技能</Link> </li>
                </ul>
            </div>
            
            <div className="rightMain">
                <Route path="/"  exact component={Index} />
            </div>
          </div>
      </Router>
    );
  }
  
  export default AppRouter;

После записи этого файла измените его/src/index.jsфайл, который необходимо импортироватьAppRouter, и продолжайтеRenderоказывать.

import React from 'react'
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'


ReactDOM.render(<AppRouter />, document.getElementById('root'));

Затем вы можете ввести терминалnpm startДайте программе запуститься, а затем перейдите в браузер для ее просмотра.

Добавьте основные стили

существует/srcкаталог, создайте новыйindex.cssфайл, затем напишите следующие стили.

body{
    padding: 0px;
    margin: 0px;
}

.mainDiv{
    display: flex;
    width: 100%;
}
.leftNav{
    width: 16%;
    background-color: #c0c0c0;
    color:#333;
    font-size:24px;
    height: 1000px;
    padding: 20px;
}
.rightMain{
    width: 84%;
    height:1000px;
    background-color: #fff;
    font-size:20px;
    
}

После написания импортируйте этот файл CSS вAppRouter.jsфайл, вы можете иметь определенный стиль. Затем зайдите в браузер, чтобы проверить эффект, если он может отображаться нормально, это означает, что то, что мы сделали до сих пор, правильно.

P07: Пример — вложенная маршрутизация ReactRouter — 2

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

написатьVideoподстраницы в

письмоVideo.jsПеред страницей нам нужно/src/Pages/videoСоздаются следующие три подфайла, которыеReactPage.js,Flutter.jsиVue.js, которые также представляют разные видеостраницы.

Компонент ReactPage.js

import React from "react";
function Reactpage(){
    return (<h2>我是React页面</h2>)
}
export default Reactpage;

Компоненты Flutter.js

import React from "react";
function Flutter(){
    return (<h2>我是Flutter页面</h2>)
}
export default Flutter;

Компоненты Vue.js

import React from "react";
function Vue(){
    return (<h2>我是Vue页面</h2>)
}
export default Vue;

Это эквивалентно заполнению трех страниц.Конечно, то, что мы делаем, очень просто.

написатьVideo.jsстраница

На этой странице написана вторичная навигация, и написание этого также находится в центре внимания курса.

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Reactpage from './video/ReactPage'
import Vue from './video/Vue'
import Flutter from './video/Flutter'


function Video(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/video/reactpage">React教程</Link></li>
                    <li><Link to="/video/vue">Vue教程</Link></li>
                    <li><Link to="/video/flutter">Flutter教程</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>视频教程</h3></div>
                <Route path="/video/reactpage/"   component={Reactpage} />
                <Route path="/video/vue/"   component={Vue} />
                <Route path="/video/flutter/"   component={Flutter} />
            </div>
        </div>
    )
}
export default Video;

ИсправлятьAppRouter.jsдокумент

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

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
//--关键代码------------start
import Video from './Pages/Video'
//--关键代码------------end
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    {/*--关键代码------------start*/}
                    <li><Link to="/video/">视频教程</Link> </li>
                    {/*--关键代码------------end*/}
                    <li><Link to="">职场技能</Link> </li>
                </ul>
            </div>
            
            <div className="rightMain">
                <Route path="/"  exact component={Index} />
                 {/*--关键代码------------start*/}
                <Route path="/video/"   component={Video} />
                 {/*--关键代码------------end*/}
            </div>
          </div>
      </Router>
    );
  }
  
  export default AppRouter;

В это время вы можете зайти в браузер, чтобы увидеть эффект.Конечно, стиля CSS пока нет, так что это не очень красиво.

.topNav{
    height:50px ;
    background-color: #cfdefd;
}
.topNav ul{
   display: flex; 
   margin: 0px;
   padding: 0px;
}
.topNav li{
   padding: 10px;
   text-align: center;
   list-style: none;
 }
 .videoContent{
     padding:20px;
 }

Так мы достиглиReact RouterФункция вложения маршрутов выглядит очень просто. Надеюсь, вы сможете его выучить.В следующем уроке мы улучшим этот кейс и напишем его полностью.

P08: Пример — вложенная маршрутизация ReactRouter-3

Этот урок также включает вложенную маршрутизацию для ссылки «Навыки на рабочем месте».Если вы уже знакомы с вложенной маршрутизацией, вы можете пропустить этот урок и сразу перейти к следующему уроку. Но если вы хотите завершить этот небольшой пример, вы можете следовать этому уроку.

Написание подстраниц третьего уровня

В разделах «Навыки на рабочем месте», «Читы на повышение зарплаты программиста» и «Программисты встают рано» есть только две подстраницы. существует/src/Pages/workPlaceВ каталоге создайте два новых файлаMoney.jsиGetup.js, а затем написать код.

Money.js

import React from "react";
function Money(){
    return (<h2>程序员加薪秘籍详情</h2>)
}
export default Money;

Getup.js

import React from "react";
function Getup(){
    return (<h2>程序员早起攻略详情</h2>)
}
export default Getup;

Написать вторичные подстраницыWorkplace

существует/src/Pagesсоздать папкуWorkplace.jsстраницу в качестве вторичной подстраницы.

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Money from './workPlace/Money'
import Getup from './workPlace/Getup'


function WorkPlace(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/workplace/Moeny">程序员加薪秘籍</Link></li>
                    <li><Link to="/workplace/Getup">程序员早起攻略</Link></li>
                   
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>职场软技能</h3></div>
                <Route path="/workplace/Moeny/"   component={Money} />
                <Route path="/workplace/Getup/"   component={Getup} />
               
            </div>
        </div>
    )
}
export default WorkPlace;

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

Настроить основной маршрутAppRouter.js

Для этого я приведу код файла напрямую, идея состоит в том, чтобы сначала ввести маршрут, который нужно настроить.Workplace, а затем настроить маршрутизацию<Route>, и наконец напишите ссылку<Link>.

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    <li><Link to="/video/">视频教程</Link> </li>
                    <li><Link to="/workplace">职场技能</Link> </li>
                </ul>
            </div>
            
            <div className="rightMain">
                <Route path="/"  exact component={Index} />
                <Route path="/video/"   component={Video} />
                <Route path="/workplace/"   component={Workplace} />
            </div>
          </div>
      </Router>
    );
  }
  
  
  export default AppRouter;

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

P09: Динамическое получение маршрутов в фоновом режиме для настройки

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

Имитация данных JSON, полученных в фоновом режиме

прямо сейчас мыAppRouter.jsВ файле симуляция получает строку JSON из фона и преобразует ее в объект (мы просто симулируем, на самом деле мы не обращаемся к удаленному устройству для запроса данных). Смоделированный код выглядит следующим образом:

let routeConfig =[
    {path:'/',title:'博客首页',exact:true,component:Index},
    {path:'/video/',title:'视频教程',exact:false,component:Video},
    {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
]

Выйдите из области ссылок

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

<ul>
    {
        routeConfig.map((item,index)=>{
            return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
        })
    }
</ul>

В это время все теги Link могут быть зациклены.

Конфигурация маршрутизации выхода из петли

Согласно приведенной выше логикеRouteцикл конфигурации вышел. код показывает, как показано ниже:

{
    routeConfig.map((item,index)=>{
        return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
    })
}

Для вашего удобства здесьAppRouter.jsвесь код.

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'

function AppRouter() {
    let routeConfig =[
      {path:'/',title:'博客首页',exact:true,component:Index},
      {path:'/video/',title:'视频教程',exact:false,component:Video},
      {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
    ]
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    {
                      routeConfig.map((item,index)=>{
                          return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
                      })
                    }
                </ul>
            </div>
            
            <div className="rightMain">
                    {
                      routeConfig.map((item,index)=>{
                          return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
                      })
                    }
                
            </div>
          </div>
      </Router>
    );
  }
  
  
  export default AppRouter;

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

Я думаю, что вы можете считаться здесьReact-RouterПриступая к работе, есть еще много вариантов использования React-Router, о которых я не упомянул. В будущем я приведу пример, чтобы объяснить эту часть содержания. Надеюсь, вы продолжите уделять внимание блогу (jspang.com ), с тремя эпизодами видео каждую неделю.

Категории