Hey I'm struggling with this problem.
This is App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
const App = () => {
return(
<>
<Router>
<Routes>
<Route path="/" component={Home} exact></Route>
<Route path="/about" component={About}></Route>
</Routes>
</Router>
</>
)
}
export default App
This is Home.js
const Home = () => {
return (
<h1>Hello from home page</h1>
)
}
export default Home
This is About.js
const About = () => {
return (
<h1>Hello from about page</h1>
)
}
export default About
After this all code content is not showing in on the home page and about page!!
In version 6 they changed the way you pass the components to the routes. You now use the element prop and also use the angled brackets around the component name.
Referring to the exact docs for configuring routes.
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
const App = () => {
return(
<>
<Router>
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/about" element={<About/>} />
</Routes>
</Router>
</>
)
}
export default App