From the course: React Foundations by Pearson

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Defining a common layout

Defining a common layout - React.js Tutorial

From the course: React Foundations by Pearson

Start my 1-month free trial Buy for my team

Defining a common layout

“

In a single-page application, you typically want to define a common layout, a common layout that displays the same content regardless of which route the user might navigate to. So for example, you might always want to display a heading on the top or menu. You might always want to display an advertising panel on the right-hand side. of the current route, you want these things to be the same for all pages. So our example application does have a common layout which is always the same. Regardless of the current route, our web application always has a menu on the top and a footer on the bottom. It's only this bit in the middle which changes as the user goes from one route to another. So how can you define a common layout? How can you say that this part and this part should always be there? Well, to define a common layout, what you do is you define a component that renders the common features which are invariant, like the menu and the footer, plus a special element called outlet, which is…

Contents