App.js acts as navigation and splash/welcome screen

[vanfossen]

I just recently followed the React Router v6 tutorial. I implemented the code into my project (live demo, GitHub) but found something interesting. App.js now acts as a "homepage" that displays nothing. It seems the main function of App.js is to be the nav bar.

Is it possible to setup App.js to include a message like:

Welcome to my application! Use the navigation above.

but this message disappears when one of the nav bar links is pressed? Currently, the message will appear above other content when one of the navigation links is pressed. It makes sense that App.js does this, since it is the parent of the other links. The easiest way would to make the navigation a component, and have all the routes on the same level, but the tutorial's structure is nice.

index.js:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter basename="/raston-router">
        <Routes>
          <Route path="/" element={<App />}>
            <Route path="output" element={<Output />} />
            <Route path="input" element={<Input />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

App.js:

export default function App() {
  return (
    <div>
      <h1>Raston Router and Redux</h1>
      <nav style={{ borderBottom: "solid 1px", paddingBottom: "1rem" }}>
        <Link to="/input" style={{ padding: "10px" }}>
          Input
        </Link>
        <Link to="/output" style={{ padding: "10px" }}>
          Output
        </Link>
      </nav>
      // welcome message would go here
      <Outlet />
    </div>
  );
}

Thank you for reading!

[vanfossen]

I found an answer myself using this StackOverflow post: https://stackoverflow.com/a/72267552/17386696

I created a route to a new component using index, seen here: https://reactrouter.com/docs/en/v6/getting-started/concepts#defining-routes

<Route index element={<LandingPage />} />