How do I make it so that the React router shows multiple elements when routing to the same address?

Right now I’m adding a login part for my website and when I click login, I want the Publish and Verify elements to not show on the website when my source is routing to /login. Here’s my code:

import { Navbar, Welcome, Footer, Publish, Verify, Login } from './components';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const App = () => {
  return (
    <div className="min-h-screen">
      <div className="gradient-bg-welcome">
        <Navbar />
        <Router>
          <Routes>
            <Route path='/' exact element={<Welcome/> } />
            <Route path='/' element={<Publish /> } />
            <Route path='/' element={<Verify />} />
            <Route path='/login' element={<Login/>} />
          </Routes>
        </Router>
      </div>
      <Footer />
    </div>
  )
}

export default App

How do I make it so that when the path="/" which is just the home page basically, only Welcome Publish and Verify show and not Login. The code I have above doesn’t work as it only shows Welcome when the path is ‘/’, but I also want it to show Publish and Verify. How can i do this?

>Solution :

You can achieve that by doing the following.

    import { Navbar, Welcome, Footer, Publish, Verify, Login } from './components';
    import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
    
    const App = () => {
      return (
        <div className="min-h-screen">
          <div className="gradient-bg-welcome">
            <Navbar />
            <Router>
              <Routes>
                <Route path='/' element={
                  <>
                    <Welcome/>
                    <Publish/>
                    <Verify/>
                  </>} />
                <Route path='/login' element={<Login/>} />
              </Routes>
            </Router>
          </div>
          <Footer />
        </div>
      )
    }
    
    export default App