如何使 React 路由器在路由到同一地址时显示多个元素？

Question

现在我正在为我的网站添加一个登录部分，当我点击登录时，我希望 Publish 和 Verify 元素在我的源路由到时不显示在网站上/login。这是我的代码：

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

如何才能让path="/"基本上只是主页时，只显示WelcomePublish和Verify而不显示[=18] =].我上面的代码不起作用，因为它只在路径为“/”时显示 Welcome，但我也希望它显示 Publish 和 Verify。我该怎么做？

Answer 1

您可以通过执行以下操作来实现。


    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

如何使 React 路由器在路由到同一地址时显示多个元素？

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

path

reactjs

react-router