Hello, in this tutorial, we'll go over Route Layouts and the Outlets component from react-router-dom.
Router Layout and Outlet Component
Learn how to use React-Router-Dom Outlets components
Route Layouts
In the Routing tutorial, we went over how to use the package - React Router - to create routes and display different components when a user enters the application with a specific URL.
That is good and all, but what if we want to include components that should be in multiple components? Like the navigation bar or footer?
One way we could achieve this with what we know right now, is to add it to all the components but that is repetitive, redundant, and hard to manage in the long term.
This is why we need to create Router Layouts from react-router-dom.
Let's see how this works.
Keep in mind that we'll be using what we did in the Routing tutorial so be sure to do that first.
Step 1:
In the App component from the Routing tutorial, wrap the "/" and "/page2" routes with another Route component.
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import MyFirstComponent from './components/MyFirstComponent';
import MySecondComponent from './components/MySecondComponent';
function App() {
return (
<BrowserRouter>
<Routes>
<Route>
<Route path="/" element={ <MyFirstComponent/> } ></Route>
<Route path="/page2" element={ <MySecondComponent/> } ></Route>
</Route>
</Routes>
</BrowserRouter>
);
}
export default App;
Step 2:
Create a layout component
function MyPageLayout(props){
return (
<div></div>
);
}
export default MyPageLayout;
Step 3:
Set it as the element prop for the Route has the other components.
<Route element={ <MyPageLayout/> }>
<Route path="/" element={ <MyFirstComponent/> } ></Route>
<Route path="/page2" element={ <MySecondComponent/> } ></Route>
</Route>
Note: If you save and launch the app. The components will not show.
From the Props tutorial, you learned that any HTML or Components that are injected in the component's opening and closing tags are represented by the children prop. And to display those elements, we had to inject that children prop into the HTML of the component.
It is a similar case here, except we are not adding those Route components into MyPageLayout so they are not available through the children prop.
For this case, we need to use the Outlet component from react-router-dom.
Step 4:
Go into MyPageLayout and import Outlet from react-router-dom.
import { Outlet } from 'react-router-dom';
Step 5:
Inject the Outlet component in the HTML of MyPageLayout.
function MyPageLayout(props){
return (
<div>
<Outlet></Outlet>
</div>
);
}
export default MyPageLayout;
The Outlet component is similar to insert the children prop, except it will display whatever is in the active route.
If you go to localhost:3000, you should what the contents of MyFirstComponent now.
Adding Shared Elements
Now that you have the Page Layout component, we can add more HTML to it and it'll be present in the "/" or "/page2" routes.
Step 1:
Add a <h1> element at the top of the Outlet component.
function MyPageLayout(props){
return (
<div>
<h1>This can be the nav bar</h1>
<Outlet></Outlet>
</div>
);
}
export default MyPageLayout;
Step 2:
Add a <p> element at the bottom of the Outlet component.
function MyPageLayout(props){
return (
<div>
<h1>This can be the nav bar</h1>
<Outlet></Outlet>
<p>This can be the footer</p>
</div>
);
}
export default MyPageLayout;
Now if we save and go to localhost:3000, we should see the <h1>, <Link>, and <p> elements.
If we click on the Go to Page 2 link, we should still see the <h1> and <p> element but the content in the middle will change.
That is all for Router Layouts and the Outlet component. Now you can easily share HTML or components between each route.
