Маршрутизация. Вставка презентация

Вставка
Для того, чтобы вставить содержимое в дочерний компонент, внутри дочернего компонента нужно использовать props.children
Родительский компонент
This is inside
Дочерний компонент
{this.props.children}

Вставка (на JSX-элементах)
Можно передать в дочерний компонент в качестве props JSX элементы, а затем вставлять их в нужные места.
Родительский компонент
title={
Заголовок!
}
/>
Дочерний компонент
{this.props.title}
Текст

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

function Dialog(props) {
return (
{props.title} {props.message}
);
}
function WelcomeDialog() {
return (
title="Добро пожаловать"
message="Спасибо, что посетили наш космический корабль!" />
);
}

Router

Router
Маршрутизация в React позволяет отрисовывать компоненты в зависимости от запросов к приложению.
Установка Router
npm i react-router-dom

Импорт нужных компонентов
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';

BrowserRouter
Компонент, определяющий маршрутизацию. Внутри него записываются все маршруты.

Link
Компонент для ссылок маршрутизации
Main
Table
Pic

Switch
Определяет сами маршруты и место для отрисовки. Для прописывания маршрутов используется компонент Route.
Слайд 12
Route
Атрибуты
path - путь
component - компонент для отрисовки. Можно заменить на запись компонента в
виде JSX внутри Route
Слайд 13
Route
Используйте вариант записи с атрибутом component, так как таким образом нормально передаются параметры
адреса.
Слайд 14
Route exact
exact - отслеживает только этот путь, без дочерних путей
Будет отслеживать
только путь /table.
/table/1 не будет отслеживаться
Слайд 15
NavLink
Компонент - аналог Link. Доступны дополнительные атрибуты:
activeClassName - класс активной ссылки
activeStyle - стили
активной ссылки
Слайд 16
props для компонентов
Чтобы передать props в компонент, который записан в Route, можно использовать
стрелочную функцию
component={(props)=> {return
}
Слайд 17
Параметры get запроса
let urlParams = new URLSearchParams(this.props.location.search);
console.log(urlParams.get("userId"));
this.props.location.search будет хранить строку поиска.
Объект
класса URLSearchParams разбирает строку запроса.
Слайд 18
Задание
Веб-приложение “Статистика группы”.
Главный компонент - список группы. Есть переадресация на разные пункты
статистики группы (общей статистики, как посещаемость, успеваемость, количество пройденных курсов), так и на статистику отдельных участников.
Информацию храните в главном компоненте.
Имя файла: Маршрутизация.-Вставка.pptx
Количество просмотров: 32
Количество скачиваний: 0
Скачать
- Предыдущая
Использование ИКТ на уроках математики
Следующая -
Программирование на языке Си. Простейшие программы
Похожие презентации
Основы сетевого администрирования
Программирование циклических алгоритмов. Начала программирования. Информатика. 8 класс
Операциялық жүйе
Scratch Middle. Знакомство с Scratch (Урок 1)
Реляционные базы данных
Програмне забезпечення комп’ютерних мереж
Деректерді қорғаудың, криптографиялық құралдары. (Дәріс 3)
Инструкция по настройке ZTE ZXHN H118N
Анализ функциональности старых систем
Влияние размытия названия видео на его ранжирование в выдаче YouTube
Комплект кейсов для студентов ВУЗов 2023 г
Digital Civility 2021 Global Report
Моделі баз даних
Установка Avaya Aura CC Elite Multichannel Desktop
Протокол OSPF для одной области (area). Занятие 12
Поняття інформаційної системи
Высказывания. Логические величины, операции, выражения
Локальные и глобальные компьютерные сети
Векторные графические редакторы
Дербес компьютерлер туралы жалпы мәліметтер
Транзакции. Часть 2
Табличные базы данных
Модели операционных систем
Архитектуры информационных систем
Презентация Правила безопасной работы в сети Интернет
Кабели симметричные. Конструкция и классификация
Программирование на языке C++
Scratсh - визуальная учебная среда для обучения школьников программированию
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q){return {data:{meta:{result:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:x,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C,item_slider_width:D,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:k,header_bg:j,accent:j}},social:E}},item:{result:{id:579118,name:l,category:F,count:G,jpg:"jpg\u002F579118",hits:32,download:b,h1:"Маршрутизация. Вставка презентация",meta:{h1:l,title:l,description:"Маршрутизация. Вставка презентация на тему, доклад, Информатика",keywords:"Маршрутизация. Вставка, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Маршрутизация. Вставка из раздела Информатика. Презентация на заданную тему содержит 19 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:a,file:"Маршрутизация.-Вставка.pptx",texts:["\u003Cp\u003E \u003Cbr\u003E","\u003Cp\u003EВставка\u003Cbr\u003E\u003Cp\u003EДля того, чтобы вставить содержимое в дочерний компонент, внутри дочернего компонента нужно использовать props.children\u003Cbr\u003E\u003Cp\u003E Родительский компонент\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003CMyComp\u003E\u003Cbr\u003E This is inside\u003Cbr\u003E \u003C\u002FMyComp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003E Дочерний компонент\u003Cbr\u003E \u003Ch1\u003E\u003Cbr\u003E {this.props.children}\u003Cbr\u003E \u003C\u002Fh1\u003E\u003Cbr\u003E","\u003Cp\u003EВставка (на JSX-элементах)\u003Cbr\u003E\u003Cp\u003EМожно передать в дочерний компонент в качестве props JSX элементы, а затем вставлять их в нужные места.\u003Cbr\u003E\u003Cp\u003E Родительский компонент\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003CMyComp\u003Cbr\u003E title={\u003Ch1\u003EЗаголовок!\u003C\u002Fh1\u003E} \u003Cbr\u003E \u002F\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003E Дочерний компонент\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E {this.props.title}\u003Cbr\u003E \u003Cp\u003EТекст\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E","\u003Cp\u003EСпециализация\u003Cbr\u003E\u003Cp\u003EReact рекомендует использует специализацию вместо наследования.\u003Cbr\u003EСпециализация означает, что вместо наследования от компонента для получения нового, вы просто описываете конкретизируете уже существующий компонент.\u003Cbr\u003EПример на следующем слайде.\u003Cbr\u003E","\u003Cp\u003Efunction Dialog(props) {\u003Cbr\u003E return (\u003Cbr\u003E \u003CFancyBorder color=\"blue\"\u003E\u003Cbr\u003E \u003Ch1 className=\"Dialog-title\"\u003E\u003Cbr\u003E {props.title}\u003Cbr\u003E \u003C\u002Fh1\u003E\u003Cbr\u003E \u003Cp className=\"Dialog-message\"\u003E\u003Cbr\u003E {props.message}\u003Cbr\u003E \u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002FFancyBorder\u003E\u003Cbr\u003E );\u003Cbr\u003E}\u003Cbr\u003Efunction WelcomeDialog() {\u003Cbr\u003E return (\u003Cbr\u003E \u003CDialog\u003Cbr\u003E title=\"Добро пожаловать\"\u003Cbr\u003E message=\"Спасибо, что посетили наш космический корабль!\" \u002F\u003E\u003Cbr\u003E );\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003ERouter \u003Cbr\u003E","\u003Cp\u003ERouter \u003Cbr\u003E\u003Cp\u003EМаршрутизация в React позволяет отрисовывать компоненты в зависимости от запросов к приложению.\u003Cbr\u003EУстановка Router\u003Cbr\u003Enpm i react-router-dom\u003Cbr\u003E","\u003Cp\u003EИмпорт нужных компонентов\u003Cbr\u003E\u003Cp\u003Eimport {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';\u003Cbr\u003E","\u003Cp\u003EBrowserRouter\u003Cbr\u003E\u003Cp\u003EКомпонент, определяющий маршрутизацию. Внутри него записываются все маршруты.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003ELink\u003Cbr\u003E\u003Cp\u003EКомпонент для ссылок маршрутизации\u003Cbr\u003E\u003CLink to=\"\u002F\"\u003EMain\u003C\u002FLink\u003E\u003Cbr\u003E\u003CLink to=\"\u002Ftable\"\u003ETable\u003C\u002FLink\u003E\u003Cbr\u003E\u003CLink to=\"\u002Fpic\"\u003EPic\u003C\u002FLink\u003E\u003Cbr\u003E","\u003Cp\u003ESwitch\u003Cbr\u003E\u003Cp\u003EОпределяет сами маршруты и место для отрисовки. Для прописывания маршрутов используется компонент Route.\u003Cbr\u003E \u003CSwitch\u003E\u003Cbr\u003E \u003Cdiv\u003E\u003Cbr\u003E \u003CRoute path=\"\u002Ftable\"\u003E\u003CTable table={this.state.table}\u002F\u003E\u003C\u002FRoute\u003E\u003Cbr\u003E \u003CRoute path=\"\u002Fpic\"\u003E\u003CPic \u002F\u003E\u003C\u002FRoute\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002FSwitch\u003E\u003Cbr\u003E","\u003Cp\u003ERoute\u003Cbr\u003E\u003Cp\u003EАтрибуты\u003Cbr\u003Epath - путь\u003Cbr\u003Ecomponent - компонент для отрисовки. Можно заменить на запись компонента в виде JSX внутри Route\u003Cbr\u003E\u003CRoute path=\"\u002Ftable\"\u003E\u003CTable table={this.state.table}\u002F\u003E\u003C\u002FRoute\u003E\u003Cbr\u003E\u003CRoute path=\"\u002Fpic\" component={Pic}\u003E\u003C\u002FRoute\u003E\u003Cbr\u003E","\u003Cp\u003ERoute\u003Cbr\u003E\u003Cp\u003EИспользуйте вариант записи с атрибутом component, так как таким образом нормально передаются параметры адреса.\u003Cbr\u003E","\u003Cp\u003ERoute exact\u003Cbr\u003E\u003Cp\u003Eexact - отслеживает только этот путь, без дочерних путей\u003Cbr\u003E\u003CRoute exact path=\"\u002Ftable\"\u003E\u003Cbr\u003EБудет отслеживать только путь \u002Ftable.\u003Cbr\u003E\u002Ftable\u002F1 не будет отслеживаться\u003Cbr\u003E","\u003Cp\u003ENavLink\u003Cbr\u003E\u003Cp\u003EКомпонент - аналог Link. Доступны дополнительные атрибуты:\u003Cbr\u003EactiveClassName - класс активной ссылки\u003Cbr\u003EactiveStyle - стили активной ссылки\u003Cbr\u003E","\u003Cp\u003Eprops для компонентов\u003Cbr\u003E\u003Cp\u003EЧтобы передать props в компонент, который записан в Route, можно использовать стрелочную функцию\u003Cbr\u003Ecomponent={(props)=\u003E {return \u003CUser {...props} table={this.state.table}\u002F\u003E}\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EПараметры get запроса\u003Cbr\u003E\u003Cp\u003E let urlParams = new URLSearchParams(this.props.location.search);\u003Cbr\u003E console.log(urlParams.get(\"userId\"));\u003Cbr\u003Ethis.props.location.search будет хранить строку поиска.\u003Cbr\u003EОбъект класса URLSearchParams разбирает строку запроса.\u003Cbr\u003E","\u003Cp\u003EЗадание\u003Cbr\u003E\u003Cp\u003EВеб-приложение “Статистика группы”. \u003Cbr\u003EГлавный компонент - список группы. Есть переадресация на разные пункты статистики группы (общей статистики, как посещаемость, успеваемость, количество пройденных курсов), так и на статистику отдельных участников.\u003Cbr\u003EИнформацию храните в главном компоненте.\u003Cbr\u003E","\u003Cp\u003EДавайте подведем итоги урока! \u003Cbr\u003EЧему мы научились? Что мы использовали? \u003Cbr\u003EК чему мы пришли?\u003Cbr\u003E"],href:"\u002Finformatika\u002Fmarshrutizatsiya-vstavka",href_category:"\u002Finformatika",date:1677731498,related:[{id:4670,name:"Основы сетевого администрирования",href:"\u002Finformatika\u002Fosnovy-setevogo-administrirovaniya",jpg:"jpg\u002F4670"},{id:585800,name:"Программирование циклических алгоритмов. Начала программирования. Информатика. 8 класс",href:"\u002Finformatika\u002Fprogrammirovanie-tsiklicheskih-algoritmov-nachala-programmirovaniya-informatika",jpg:"jpg\u002F585800"},{id:337112,name:"Операциялық жүйе",href:"\u002Finformatika\u002Foperatsiyaly-zhye-6",jpg:"jpg\u002F337112"},{id:12511,name:"Scratch Middle. Знакомство с Scratch (Урок 1)",href:"\u002Finformatika\u002Fscratch-middle-znakomstvo-s-scratch-urok",jpg:"jpg\u002F12511"},{id:2051,name:"Реляционные базы данных",href:"\u002Finformatika\u002Frelyatsionnye-bazy-dannyh-1",jpg:"jpg\u002F2051"},{id:281878,name:"Програмне забезпечення комп’ютерних мереж",href:"\u002Finformatika\u002Fprogramne-zabezpechennya-kompyuternih-merezh",jpg:"jpg\u002F281878"},{id:101396,name:"Деректерді қорғаудың, криптографиялық құралдары. (Дәріс 3)",href:"\u002Finformatika\u002Fderekterd-oraudy-kriptografiyaly-raldary-drs-3",jpg:"jpg\u002F101396"},{id:251265,name:"Инструкция по настройке ZTE ZXHN H118N",href:"\u002Finformatika\u002Finstruktsiya-po-nastroyke-zte-zxhn-h118n",jpg:"jpg\u002F251265"},{id:603754,name:"Анализ функциональности старых систем",href:"\u002Finformatika\u002Fanaliz-funktsionalnosti-staryh-sistem",jpg:"jpg\u002F603754"},{id:279163,name:"Влияние размытия названия видео на его ранжирование в выдаче YouTube",href:"\u002Finformatika\u002Fvliyanie-razmytiya-nazvaniya-video-na-ego",jpg:"jpg\u002F279163"},{id:579576,name:"Комплект кейсов для студентов ВУЗов 2023 г",href:"\u002Finformatika\u002Fkomplekt-keysov-dlya-studentov-vuzov-2023",jpg:"jpg\u002F579576"},{id:412778,name:"Digital Civility 2021 Global Report",href:"\u002Finformatika\u002Fdigital-civility-2021-global-report",jpg:"jpg\u002F412778"},{id:1945,name:"Моделі баз даних",href:"\u002Finformatika\u002Fmodel-baz-danih",jpg:"jpg\u002F1945"},{id:322978,name:"Установка Avaya Aura CC Elite Multichannel Desktop",href:"\u002Finformatika\u002Fustanovka-avaya-aura-cc-elite-multichannel",jpg:"jpg\u002F322978"},{id:577980,name:"Протокол OSPF для одной области (area). Занятие 12",href:"\u002Finformatika\u002Fprotokol-ospf-dlya-odnoy-oblasti-area",jpg:"jpg\u002F577980"},{id:378052,name:"Поняття інформаційної системи",href:"\u002Finformatika\u002Fponyattya-nformatsyno-sistemi",jpg:"jpg\u002F378052"},{id:610316,name:"Высказывания. Логические величины, операции, выражения",href:"\u002Finformatika\u002Fvyskazyvaniya-logicheskie-velichiny-operatsii-vyrazheniya",jpg:"jpg\u002F610316"},{id:481453,name:"Локальные и глобальные компьютерные сети",href:"\u002Finformatika\u002Flokalnye-i-globalnye-kompyuternye-seti-13",jpg:"jpg\u002F481453"},{id:10887,name:"Векторные графические редакторы",href:"\u002Finformatika\u002Fvektornye-graficheskie-redaktory",jpg:"jpg\u002F10887"},{id:401694,name:"Дербес компьютерлер туралы жалпы мәліметтер",href:"\u002Finformatika\u002Fderbes-kompyuterler-turaly-zhalpy-mlmetter",jpg:"jpg\u002F401694"},{id:22320,name:"Транзакции. Часть 2",href:"\u002Finformatika\u002Ftranzaktsii-chast-2",jpg:"jpg\u002F22320"},{id:371175,name:"Табличные базы данных",href:"\u002Finformatika\u002Ftablichnye-bazy-dannyh-3",jpg:"jpg\u002F371175"},{id:542429,name:"Модели операционных систем",href:"\u002Finformatika\u002Fmodeli-operatsionnyh-sistem",jpg:"jpg\u002F542429"},{id:24275,name:"Архитектуры информационных систем",href:"\u002Finformatika\u002Farhitektury-informatsionnyh-sistem",jpg:"jpg\u002F24275"},{id:519833,name:"Презентация Правила безопасной работы в сети Интернет",href:"\u002Finformatika\u002Fprezentatsiya-pravila-bezopasnoy-raboty-v-seti",jpg:"jpg\u002F519833"},{id:146330,name:"Кабели симметричные. Конструкция и классификация",href:"\u002Finformatika\u002Fkabeli-simmetrichnye-konstruktsiya-i-klassifikatsiya",jpg:"jpg\u002F146330"},{id:133846,name:"Программирование на языке C++",href:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-c-64",jpg:"jpg\u002F133846"},{id:580130,name:"Scratсh - визуальная учебная среда для обучения школьников программированию",href:"\u002Finformatika\u002Fscratsh-vizualnaya-uchebnaya-sreda-dlya-obucheniya-1",jpg:"jpg\u002F580130"}],navigation:{next:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-si-prosteyshie-programmy",next_name:"Программирование на языке Си. Простейшие программы",prev:"\u002Fmatematika\u002Fispolzovanie-ikt-na-urokah-matematiki-11",prev_name:"Использование ИКТ на уроках математики"}}},categories:{result:[{id:H,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:H,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:F,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:G,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:x,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C,item_slider_width:D,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:k,header_bg:j,accent:j}},social:E,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable",13,"h3","#d53032","#ffffff","Маршрутизация. Вставка","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",19,1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Route
Атрибуты
path - путь
component - компонент для отрисовки. Можно заменить на запись компонента в виде JSX внутри Route

Route
Используйте вариант записи с атрибутом component, так как таким образом нормально передаются параметры адреса.

Route exact
exact - отслеживает только этот путь, без дочерних путей
Будет отслеживать только путь /table.
/table/1 не будет отслеживаться

NavLink
Компонент - аналог Link. Доступны дополнительные атрибуты:
activeClassName - класс активной ссылки
activeStyle - стили активной ссылки

props для компонентов
Чтобы передать props в компонент, который записан в Route, можно использовать стрелочную функцию
component={(props)=> {return
}

Параметры get запроса
let urlParams = new URLSearchParams(this.props.location.search);
console.log(urlParams.get("userId"));
this.props.location.search будет хранить строку поиска.
Объект класса URLSearchParams разбирает строку запроса.

Задание
Веб-приложение “Статистика группы”.
Главный компонент - список группы. Есть переадресация на разные пункты статистики группы (общей статистики, как посещаемость, успеваемость, количество пройденных курсов), так и на статистику отдельных участников.
Информацию храните в главном компоненте.