Why Am I getting this Router Error , Check Description for error (React)

March 9, 2022

I am following a tutorial on React Router and copied exactly the same thing yet I get this errors in console

Error 1 – index.js:16 Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .

Error 2 – react-dom.development.js:20085 The above error occurred in the component:

This is my code in App.js:

import React from 'react';
import './App.css';
import HomePage from './Components/HomePage/HomePage'
import WhoWeHelp from './Components/WhoWeHelpPage/WhoWeHelp';
import {BrowserRouter as Router , Switch , Route} from 'react-router-dom'

function App() {
  return (
      <Router>
        <div className="App">
          <Route path="/" component={HomePage} />
          <Route path="/whowehelp" component={WhoWeHelp} />
        </div>
      </Router>
  );
}

export default App;

>Solution :

You need to wrap all the Route in the Routes component. You also need to remove the div as Route needs direct nesting

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

 <Router>
   <Routes>
        <Route path="/" element ={<HomePage />} />
        <Route path="/whowehelp" element ={<WhoWeHelp />} />
    </Routes>
  </Router>

Updated component to element as pointed out in the comments. Component has been replaced by element in react router v6. See the changes here