Need help with <Route>

Hello, I'm learning react by following a video, however I did everything the same but I came across this error below. Since the video is about 1 year ago, I'm guessing that the react has updated by then since "<Routes>" was never mentioned. How do I fix this? "Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>."
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="content">
<Route path="/products" Component={Products} />
<Route path="/posts" Component={Posts} />
<Route path="/admin" Component={Dashboard} />
<Route path="/" Component={Home} />
</div>
</div>
);
}
}
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="content">
<Route path="/products" Component={Products} />
<Route path="/posts" Component={Posts} />
<Route path="/admin" Component={Dashboard} />
<Route path="/" Component={Home} />
</div>
</div>
);
}
}
9 Replies
Jochem
Jochem•2y ago
the error suggests this
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="content">
<Routes>
<Route path="/products" Component={Products} />
<Route path="/posts" Component={Posts} />
<Route path="/admin" Component={Dashboard} />
<Route path="/" Component={Home} />
</Routes>
</div>
</div>
);
}
}
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="content">
<Routes>
<Route path="/products" Component={Products} />
<Route path="/posts" Component={Posts} />
<Route path="/admin" Component={Dashboard} />
<Route path="/" Component={Home} />
</Routes>
</div>
</div>
);
}
}
as a first step at least
kingtigerknight
kingtigerknight•2y ago
Hmmm, ok it dose work but something is off. Here is what I'm seeing.
kingtigerknight
kingtigerknight•2y ago
And this is what it suppose to look like in the video
Jochem
Jochem•2y ago
I think maybe you're missing somewhere where the nested route is showing? Though I also don't speak React, I just read the error message 🤷
kingtigerknight
kingtigerknight•2y ago
hmmm, I guess since react updated since the video, I'll need to fixed it somehow XD
Jochem
Jochem•2y ago
again, take what I say with a grain of salt, I've never used react, just Vue and Svelte and one misguided drunken night with Angular way back in the day
kingtigerknight
kingtigerknight•2y ago
All good, I gotten pass step 1 . Thanks for help 🙂
Kernix
Kernix•2y ago
I think you also need router:
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
I haven't done class based React, I have only done functional, but here is my App.js in my GitHub repo from a Brad Traversy course: https://github.com/Kernix13/house-marketplace/blob/main/src/App.js
GitHub
house-marketplace/App.js at main · Kernix13/house-marketplace
React app from Brad Traversy Udemy course using Firebase for DB storage. - house-marketplace/App.js at main · Kernix13/house-marketplace
kingtigerknight
kingtigerknight•2y ago
I fixed it. It all works now 🙂
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="content">
<Routes>
<Route path="/products" element={<Products />} />
<Route path="/posts" element={<Posts />} />
<Route path="/admin" element={<Dashboard />} />
<Route path="/" element={<Home />} />
</Routes>
</div>
</div>
);
}
}
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="content">
<Routes>
<Route path="/products" element={<Products />} />
<Route path="/posts" element={<Posts />} />
<Route path="/admin" element={<Dashboard />} />
<Route path="/" element={<Home />} />
</Routes>
</div>
</div>
);
}
}
Want results from more Discord servers?
Add your server