Create Landing page that render something instead of outlet when route is empty

so I'm using React router for a project, and I need to render something on the landing page so it isn't just a blank page. But the component the app renders has an outlet, and I don't want to deal with making it invisible if the route is not empty. There must be a way to make it so the route displays content if there is any on the output and something else if the output is empty. What came to mind is a tertiary conditional, but i don't know how t make it work in this conditions.

The code structure is something like the following:

const App = () => {
    return (
     <div>
        {//Some code that has to display on every page here}
         <Outlet />
        {//Some code that has to display on every page here}
     </div>)

Solution 1:

If you read the docs https://reactrouter.com/docs/en/v6/api#outlet

<Outlet>

An <Outlet> should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

More on Index Routes at https://reactrouter.com/docs/en/v6/getting-started/tutorial#index-routes

So, you need to add an index route nested under the route for App.

// assuming the following is your route for App
<Route path="/" element={<App />}>
  // add the following index route
  <Route index element={
     <div>your landing content</div>
    } />
</Route>