#Layouts and Nested Content
Occasionally, you’ll find that you have some content that is shared between a section of your app, without being shared across the whole thing. You can’t render it in the
<App /> component because it’s not needed for every page, but you don’t want to repeat it across every single page that uses it. For example, the navigation bar on the left of this documentation site is shared by all pages within Navi’s documentation, while not being displayed on Frontend Armory’s courses and blog.
In situations like this, you’ll need a way to render layout components — i.e. components that are shared between pages. And Navi lets you solve this by associating
content props with multiple URL segments.
Switches can have content too.
In a Navi app, it’s possible to declare
content for both Pages and Switches. In fact, the syntax is identical — you just pass a
getContent option to
//--- restricted: true editorFilename: /pages.js //--- index.js <-- index.js //--- pages.js <-- pages.js //--- Layout.js <-- Layout.js //--- home.md <-- home.md //--- about.md <-- about.md //--- styles.css <-- styles.css
When you add
content to a
Switch in a React app, your
<NavContent /> element will render the Switch’s content instead of the child Page’s content. This is because
<NavContent /> will always render the first available
content in the current URL’s Switch or Page segments.
Of course, if you do declare some
content for a Switch, you’ll still need a way to render the Page’s content too! And to do that, you’ll also use
<NavContent /> — you just need to use it inside of the switch’s content, as so:
//--- restricted: true editorFilename: /Layout.js //--- index.js <-- index.js //--- pages.js <-- pages.js //--- Layout.js <-- Layout.js //--- home.md <-- home.md //--- about.md <-- about.md //--- styles.css <-- styles.css
Here’s the rule for
<NavContent /> will render the next available
content that hasn’t already been rendered by a parent component.
This allows you to embed entire navi-based websites within other navi-based websites. In fact, that’s how the Navi documentation website that you’re reading is embedded within Frontend Armory — they both use Navi for routing. You can learn more about this by taking a look at the Navi Website’s source.