import {Routes, Route} from 'react-router-dom';
import HomePage from './Pages/Home';
import AboutPage from './Pages/About';
import ServicesPage from './Pages/Services';
import Meet from './Components/Meet';
import NavBar from './Components/layout/NavBar';
function App() {
return (
<div className="App">
<Meet text ='my meet up'/>
<Meet text = 'my name'/>
<Meet text = 'contact information'/>
<NavBar/>
<Routes>
<Route path='/home' element = {<HomePage/>}/>
<Route path='/about' element = {<AboutPage/>}/>
<Route path='/service' element = {<ServicesPage/>}/>
</Routes>
</div>
);
}
export default App;
Interestingly, I would like the content displayed when clicking a Routes link to hide the Meet component with text='my meet up'
I made an attempt using the useState hook toggle approach to achieve this but unfortunately, it didn't work as expected. My desired outcome is for only the specific Route content to be visible on the screen when a Routes link is clicked.