что такое Outlet React Router Dom

что такое Outlet React Router Dom

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

Как работает Outlet?

Когда компонент Outlet рендерится, он ищет первый дочерний маршрут, который соответствует текущему состоянию маршрутизации. Если такой маршрут найден, то Outlet рендерит содержимое этого маршрута. Если дочерних маршрутов, соответствующих текущему состоянию маршрутизации, нет, то Outlet рендерит пустой элемент.

Пример использования Outlet

Вот пример использования Outlet для отображения боковой панели в родительском маршруте:

import React from "react"; import { Outlet, Route } from "react-router-dom"; const App = () => { return ( <div> <Route path="/" exact component={SideBar} /> <Route path="/about" component={About} /> <Outlet /> </div> ); }; const SideBar = () => { return ( <div> <h2>Боковая панель</h2> <ul> <li><a href="/about">О нас</a></li> <li><a href="/contact">Контакты</a></li> </ul> </div> ); }; const About = () => { return ( <div> <h2>О нас</h2> <p>Мы - компания, которая занимается разработкой программного обеспечения.</p> </div> ); }; 

В этом примере компонент SideBar определяет маршрут с путем / и компонент About определяет маршрут с путем /about. Родительский маршрут определяет компонент Outlet с пустым элементом.

Когда пользователь переходит на страницу /, Outlet рендерит компонент SideBar. Когда пользователь переходит на страницу /about, Outlet рендерит компонент About.

Дополнительные возможности Outlet

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

  • Context: Outlet поддерживает контекст, который позволяет передавать данные из родительского компонента в дочерние компоненты.
  • Props: Outlet поддерживает свойства, которые можно использовать для настройки его поведения.
  • OutletRef: OutletRef – это хук React, который возвращает объект, который можно использовать для доступа к компоненту Outlet.
See also  что такое Rap Roblox

Заключение

Outlet – это мощный инструмент, который можно использовать для создания сложных пользовательских интерфейсов с вложенными маршрутами. Он предоставляет широкий спектр возможностей, которые позволяют адаптировать его к конкретным потребностям приложения.

  • Outlet
  • React Router Dom
  • Вложенный маршрут
  • Боковая панель
  • Подвал
  • Шапка
  • Context
  • Props
  • OutletRef

Webimport { Link, Outlet } from "react-router-dom"; export function BooksLayout() { return ( <> <Outlet context={{ hello: "world" } satisfies BookOutletContext} /> </> ); }. Webfunction Parent { const [count, setCount] = React. useState (0); return < Outlet context = {[count, setCount]} />; } import { useOutletContext } from " react-router-dom "; function. WebModified 1 year, 10 months ago. Viewed 3k times. 6. I'm using react-router-dom V6 and I would like to know if it was possible to add more than one Outlet. Webimport React from 'react'; import { Routes, Route, Outlet, useOutletContext } from 'react-router-dom'; export default function App() { return ( <Routes> <Route. WebWhat's New in 6.4? v6.4 is our most exciting release yet with new data abstractions for reads, writes, and navigation hooks to easily keep your UI in sync with your data. The. Webimport { Outlet } from "react-router-dom"; Place the Outlet component within the Eras component: function Eras () { return ( < div > < h1 >The Eras of Time</ h1 > < ul.

Общая разметка и компонент Outlet в React-Router 6

Общая разметка и компонент Outlet в React-Router 6

Source: Youtube.com

React Router in Depth #3 – Router Provider, createBrowserRouter & Outlet

React Router in Depth #3 - Router Provider, createBrowserRouter & Outlet

Source: Youtube.com

что такое Outlet React Router Dom, Общая разметка и компонент Outlet в React-Router 6, 7.23 MB, 05:16, 74,159, Михаил Непомнящий, 2021-11-09T06:54:43.000000Z, 2, React router dom switch – monitorper, 1280 x 720, jpeg, , 3, %d1%87%d1%82%d0%be-%d1%82%d0%b0%d0%ba%d0%be%d0%b5-outlet-react-router-dom

что такое Outlet React Router Dom. Webinterface OutletProps { context?: unknown; } declare function Outlet ( props: OutletProps): React. ReactElement | null ; An <Outlet> should be used in parent route elements to render their child route elements. WebAdd Outlet instead of {children} import {Outlet} from "react-router-dom" const AuthLayout = ({ page, children, img }) => { return ( <main className={`auth-layout.

See also  что такое Kubernetes и зачем он нужен

Шестая версия библиотеки react-router-dom предлагает альтернативный подход к организации типовых элементов страницы, таких как шапка, сайдбар и подвал. Для этого, в частности был придуман компонент Outlet, который также используется во вложенном роутинге.

Код урока: github.com/michey85/youtube-react-router-v6/commit/4a6d4a7eac26cf980c77443cbc01215ceff33b14

Мои курсы по вебу с купонами:
✅ mishanep.com/

📢 Поддержка канала:
tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741
paypal.me/mishanep

что такое Outlet React Router Dom, Webimport React from 'react'; import { Routes, Route, Outlet, useOutletContext } from 'react-router-dom'; export default function App() { return ( <Routes> <Route. WebWhat's New in 6.4? v6.4 is our most exciting release yet with new data abstractions for reads, writes, and navigation hooks to easily keep your UI in sync with your data. The. Webimport { Outlet } from "react-router-dom"; Place the Outlet component within the Eras component: function Eras () { return ( < div > < h1 >The Eras of Time</ h1 > < ul.

что такое Outlet React Router Dom

React router dom switch – monitorper – Source: monitorper.weebly.com

что такое Outlet React Router Dom

Outlet React Router Dom . no Recat Js – YouTube – Source: www.youtube.com

что такое Outlet React Router Dom

React router dom example – wearlasopa – Source: wearlasopa664.weebly.com

Related Posts

что такое Google Trends

Google Trends – это бесплатный инструмент, который позволяет отслеживать популярность поисковых запросов в Google. Он предоставляет данные о том, сколько раз определенный поисковый запрос вводился в Google…

что снижает Ph воды

Что снижает pH воды? Уровень pH воды – это показатель ее кислотности. Он измеряется по шкале от 0 до 14, где 7 – нейтральная среда, ниже 7…

что означает вар в кс го

VAR – это аббревиатура от "Variation", что означает "вариация". В контексте CS:GO VAR – это показатель, который показывает, насколько сильно меняется частота кадров (FPS) игрока за последние…

что такое Api Key

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

что такое Inversion Of Control и как Spring реализует этот принцип

Inversion Of Control (IoC) – это архитектурный принцип, который предполагает, что объекты не должны создавать друг друга или получать доступ к другим объектам напрямую. Вместо этого они…

что такое совокупность черт

Подзаголовок 1: Определение совокупности черт Совокупность черт – это набор характеристик, свойств или признаков, которые присущи одному объекту или субъекту. Эти черты могут быть физическими, умственными, эмоциональными,…

Leave a Reply

Your email address will not be published. Required fields are marked *