React Router error "A is only ever to be used as the child of element,"

Question

Each time i try to run that code have the Router error. my Router version is v6.14 as seen in the package json. any idea will be appreciated. and below are my react project codes


my App.js 


import Header from './Header';
import Nav from './Nav';
import Home from './Home';
import NewPost from './NewPost';
import PostPage from './PostPage';
import About from './About';
import Missing from './Missing';
import Footer from './Footer';
import { Route, Switch, useHistory } from 'react-router-dom'
import { useState, useEffect } from 'react';

function App() {
  return (
    <div className="App">
      <Header />
      <Nav />
      <Home />
      <NewPost />
      <PostPage />
      <About />
      <Missing />
      <Footer />  
    </div>
  );
}

export default App;


my index.js code,


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router, Route } from 'react-router-dom';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <Route path="/" component={App} />
    </Router>
  </React.StrictMode>
);



this my package.js


{
  "name": "reactprojects",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.10.1",
    "react-router-dom": "^6.14.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Each time i try to run that code have the Router error. my Router version is v6.14 as seen in the package json. any idea will be appreciated.

Not that un-used imports are an issue but why do you have -> `import { Route, Switch, useHistory } from 'react-router-dom'` in your app.js, is there some code here you haven't posted?. Also in `app.js` your have -> ` ` these seem like they would be different pages, as such there routes. — Keith, Aug 08 '23 at 10:54
@keith, I am following a tutorial. Router 5 was used. Why my current Node setup is the latest which is Router 6 as seen in the package.json I posted earlier. So please what is the proper index and app setup for router 6. — Kiki-ko, Aug 08 '23 at 18:03
I managed to find a way around it using the link you posted earlier. as seen here. `import Header from './Header'; import Nav from './Nav'; import Home from './Home'; import NewPost from './NewPost'; import PostPage from './PostPage'; import About from './About'; import Missing from './Missing'; import Footer from './Footer'; //import { Route, Switch, useHistory } from 'react-router-dom' import { useState, useEffect } from 'react'; import { Route, Routes, useNavigate } from 'react-router-dom'; ` — Kiki-ko, Aug 08 '23 at 23:12
And `function App() { return (

} /> } /> } /> } /> } />

); } export default App; ` **The above is for App.js** — Kiki-ko, Aug 08 '23 at 23:15
**While below is the index.js** `import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';` **And,** `const root = ReactDOM.createRoot(document.getElementById('root')); root.render( } /> ); ` However, each time I try to transverse the elements for example **http://localhost:3000/post** — Kiki-ko, Aug 08 '23 at 23:18
I have a blank page, and when I checked the console. i have this error message `No routes matched location "/post" ` Any tip will be appreciated. Thanks — Kiki-ko, Aug 08 '23 at 23:20

React Router error "A is only ever to be used as the child of element,"

0 Answers0