Showing a Nav component on all routes-CodePudding

I'm trying to setup my routes so that when the user navigates to localhost:3000/, the Nav and Home are displayed. But when the user navigates to localhost:3000/something, only the Nav bar should be displayed. The Nav should be always be displayed.

Here is how I have done it in v5 and it works But I'm not sure how to do it in v6.

function App () {
  return (
    <>
      <div className='title'>
        <h1>My App</h1>
      </div>
      <div className='main'>
        <Route path='/' component={Nav} />
        <Route exact path='/' component={Home} />
      </div>
    </>
  )
}

Here is my attempt with v6

function App () {
  return (
    <>
      <div className='title'>
        <h1>My App</h1>
      </div>
      <div className='main'>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='*'>
            <Route element={<Nav />} />
          </Route>
        </Routes>
      </div>
    </>
  )
}

Not sure what's wrong here.

CodePudding user response：

If Im understanding your question correctly, you want to render a Nav on all routes. For this you can create a "layout" component to render on "/" which renders the Nav component and all children routes into an Outlet. Specify the Home component as the index route so it renders when no other routes match.

The

CodePudding user response：

Both examples you provide are a weird practice.

Its a simple as this:

function App () {
  return (
      <div className='main'>
        <Routes>
          <Nav />
          <Route path='/' element={<Home />} />
        </Routes>
      </div>
  )
}