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

Question

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

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="/"基本上只是主页时，只显示Welcome、Publish和Verify，而不显示Login。我上面的代码不起作用，因为它只在路径为"/"时显示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