Kevin Powell - Community•2y ago

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•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

kingtigerknightOP•2y ago

Hmmm, ok it dose work but something is off. Here is what I'm seeing.

kingtigerknightOP•2y ago

And this is what it suppose to look like in the video

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 🤷

kingtigerknightOP•2y ago

hmmm, I guess since react updated since the video, I'll need to fixed it somehow XD

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

kingtigerknightOP•2y ago

All good, I gotten pass step 1 . Thanks for help 🙂

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

kingtigerknightOP•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>
        );
    }
}

Gaming

Programming

Need help with <Route>