Для отображения двух разных Outlet в разных местах в компоненте React, вам потребуется использовать механизм маршрутизации, который предоставляется библиотекой React Router.
По умолчанию, React Router предлагает один Outlet, который отображается в месте, указанном в родительском компоненте. Однако, с использованием дополнительных компонентов, вы можете создавать несколько Outlet и указывать их расположение в компоненте.
Во-первых, необходимо установить React Router с помощью следующей команды:
npm install react-router-dom
Затем вы должны импортировать необходимые компоненты из React Router:
import { BrowserRouter as Router, Switch, Route, Outlet } from 'react-router-dom';
Теперь вы можете создать компоненты, в которых будет использоваться Outlet. Для примера, давайте создадим два компонента: Home
и About
.
Home.js:
import React from 'react'; const Home = () => { return ( <div> <h1>Home</h1> <Outlet name="outlet1" /> <Outlet name="outlet2" /> </div> ); }; export default Home;
About.js:
import React from 'react'; const About = () => { return ( <div> <h1>About</h1> <Outlet name="outlet1" /> </div> ); }; export default About;
В этих компонентах мы добавляем два Outlet с именами outlet1
и outlet2
. Имя Outlet - это произвольная строка, которую мы выбираем и которая будет использоваться для их различения.
Теперь давайте создадим родительский компонент App.js, который будет использовать маршрутизацию и отображать компоненты Home и About:
import React from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; const App = () => { return ( <Router> <Switch> <Route path="/" exact> <Home /> </Route> <Route path="/about"> <About /> </Route> </Switch> </Router> ); }; export default App;
Теперь, если вы включите компоненты Home и About в родительский компонент App, каждый Outlet будет отображаться в соответствующих компонентах. Outlet с именем outlet1
будет отображаться в обоих компонентах - Home и About, а Outlet с именем outlet2
будет отображаться только в компоненте Home.
Таким образом, вы можете использовать механизм маршрутизации и Outlet из React Router, чтобы отобразить два разных Outlet в разных местах в компоненте React.