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

Вставка
Для того, чтобы вставить содержимое в дочерний компонент, внутри дочернего компонента нужно использовать 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 - отслеживает только этот путь, без дочерних путей
path="/table">
Будет отслеживать только путь /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
Количество просмотров: 56
Количество скачиваний: 0
Скачать
- Предыдущая
Использование ИКТ на уроках математики
Следующая -
Программирование на языке Си. Простейшие программы
Похожие презентации
Виды и основные особенности трафика
Компьютерная графика
Антивирусные программы
Сайты, доступные каждому или Как не платить за СЕО
Виды компьютерной графики
Операционная система
Системы счисления. (10 класс)
Smart TV и операционные системы ТВ
Планирование и отчетность по процессу тестирования
Компьютерлік модель. Компьютерде модельдерді зерттеу
Технологии программирования. Индексирование: понятие индекса, типы индексных файлов. Создание, активация и удаление индекса
Haskell тілінің негіздері. Зертханалық жұмыс №1
Шаблон для презентаций. Презентация исследования (здесь название)
Информационные технологии в управлении персоналом. АРМ – автоматизированное рабочее место
Презентация У истоков компьютерной революции
Основные этапы развития вычислительной техники
Необобщенные коллекции
Презентация к уроку информатики во 2-м классе по программе Перспективная начальная школа Устройство компьютера
Проектирование баз данных. Преобразования запросов
Функции в языках объектно-ориентированного программирования
Типы данных
Тестирование и отладка программных средств
Законодательство в сфере информационной безопасности
Ввод данных. Форматирование таблиц. Ссылки, формулы
Cтандартные телеграммы при обслуживании рейса
Элементы языка Паскаль
Инфографика
Тестирование web-приложений
Обратная связь
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,R){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,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:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},item:{result:{id:579118,name:m,category:G,count:H,jpg:"jpg\u002F579118",hits:56,download:b,h1:"Маршрутизация. Вставка презентация",meta:{h1:m,title:m,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:219560,name:"Виды и основные особенности трафика",href:"\u002Finformatika\u002Fvidy-i-osnovnye-osobennosti-trafika",jpg:"jpg\u002F219560"},{id:170396,name:"Компьютерная графика",href:"\u002Finformatika\u002Fkompyuternaya-grafika-17",jpg:"jpg\u002F170396"},{id:398633,name:"Антивирусные программы",href:"\u002Finformatika\u002Fantivirusnye-programmy-10",jpg:"jpg\u002F398633"},{id:212973,name:"Сайты, доступные каждому или Как не платить за СЕО",href:"\u002Finformatika\u002Fsayty-dostupnye-kazhdomu-ili-kak-ne",jpg:"jpg\u002F212973"},{id:420719,name:"Виды компьютерной графики",href:"\u002Finformatika\u002Fvidy-kompyuternoy-grafiki-5",jpg:"jpg\u002F420719"},{id:366466,name:"Операционная система",href:"\u002Finformatika\u002Foperatsionnaya-sistema-94",jpg:"jpg\u002F366466"},{id:395134,name:"Системы счисления. (10 класс)",href:"\u002Finformatika\u002Fsistemy-schisleniya-10-klass",jpg:"jpg\u002F395134"},{id:246459,name:"Smart TV и операционные системы ТВ",href:"\u002Finformatika\u002Fsmart-tv-i-operatsionnye-sistemy-tv",jpg:"jpg\u002F246459"},{id:359554,name:"Планирование и отчетность по процессу тестирования",href:"\u002Finformatika\u002Fplanirovanie-i-otchetnost-po-protsessu-testirovaniya",jpg:"jpg\u002F359554"},{id:335280,name:"Компьютерлік модель. Компьютерде модельдерді зерттеу",href:"\u002Finformatika\u002Fkompyuterlk-model-kompyuterde-modelderd-zertteu-2",jpg:"jpg\u002F335280"},{id:302629,name:"Технологии программирования. Индексирование: понятие индекса, типы индексных файлов. Создание, активация и удаление индекса",href:"\u002Finformatika\u002Ftehnologii-programmirovaniya-indeksirovanie-ponyatie-indeksa-tipy",jpg:"jpg\u002F302629"},{id:95469,name:"Haskell тілінің негіздері. Зертханалық жұмыс №1",href:"\u002Finformatika\u002Fhaskell-tln-negzder-zerthanaly-zhmys-n1",jpg:"jpg\u002F95469"},{id:174801,name:"Шаблон для презентаций. Презентация исследования (здесь название)",href:"\u002Finformatika\u002Fshablon-dlya-prezentatsiy-prezentatsiya-issledovaniya-zdes",jpg:"jpg\u002F174801"},{id:116795,name:"Информационные технологии в управлении персоналом. АРМ – автоматизированное рабочее место",href:"\u002Finformatika\u002Finformatsionnye-tehnologii-v-upravlenii-personalom-arm",jpg:"jpg\u002F116795"},{id:508090,name:"Презентация У истоков компьютерной революции",href:"\u002Finformatika\u002Fprezentatsiya-u-istokov-kompyuternoy-revolyutsii",jpg:"jpg\u002F508090"},{id:442879,name:"Основные этапы развития вычислительной техники",href:"\u002Finformatika\u002Fosnovnye-etapy-razvitiya-vychislitelnoy-tehniki",jpg:"jpg\u002F442879"},{id:291569,name:"Необобщенные коллекции",href:"\u002Finformatika\u002Fneobobshchennye-kollektsii",jpg:"jpg\u002F291569"},{id:474050,name:"Презентация к уроку информатики во 2-м классе по программе Перспективная начальная школа Устройство компьютера",href:"\u002Finformatika\u002Fprezentatsiya-k-uroku-informatiki-vo-2",jpg:"jpg\u002F474050"},{id:4331,name:"Проектирование баз данных. Преобразования запросов",href:"\u002Finformatika\u002Fproektirovanie-baz-dannyh-preobrazovaniya-zaprosov",jpg:"jpg\u002F4331"},{id:353889,name:"Функции в языках объектно-ориентированного программирования",href:"\u002Finformatika\u002Ffunktsii-v-yazykah-obektno-orientirovannogo-programmirovaniya",jpg:"jpg\u002F353889"},{id:387471,name:"Типы данных",href:"\u002Finformatika\u002Ftipy-dannyh-5",jpg:"jpg\u002F387471"},{id:89197,name:"Тестирование и отладка программных средств",href:"\u002Finformatika\u002Ftestirovanie-i-otladka-programmnyh-sredstv",jpg:"jpg\u002F89197"},{id:434868,name:"Законодательство в сфере информационной безопасности",href:"\u002Finformatika\u002Fzakonodatelstvo-v-sfere-informatsionnoy-bezopasnosti",jpg:"jpg\u002F434868"},{id:105598,name:"Ввод данных. Форматирование таблиц. Ссылки, формулы",href:"\u002Finformatika\u002Fvvod-dannyh-formatirovanie-tablits-ssylki-formuly",jpg:"jpg\u002F105598"},{id:103700,name:"Cтандартные телеграммы при обслуживании рейса",href:"\u002Finformatika\u002Fctandartnye-telegrammy-pri-obsluzhivanii-reysa",jpg:"jpg\u002F103700"},{id:288850,name:"Элементы языка Паскаль",href:"\u002Finformatika\u002Felementy-yazyka-paskal",jpg:"jpg\u002F288850"},{id:174786,name:"Инфографика",href:"\u002Finformatika\u002Finfografika-2",jpg:"jpg\u002F174786"},{id:294186,name:"Тестирование web-приложений",href:"\u002Finformatika\u002Ftestirovanie-web-prilozheniy",jpg:"jpg\u002F294186"}],navigation:{next:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-si-prosteyshie-programmy",next_name:"Программирование на языке Си. Простейшие программы",prev:"\u002Fmatematika\u002Fispolzovanie-ikt-na-urokah-matematiki-11",prev_name:"Использование ИКТ на уроках математики"}}},categories:{result:[{id:I,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:I,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:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,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:H,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:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:R,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:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,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:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","Маршрутизация. Вставка","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,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 - отслеживает только этот путь, без дочерних путей path="/table">
Будет отслеживать только путь /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 разбирает строку запроса.

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