why React Router not rendering dom

Question

Hi i am having trouble in mapping url in react.i am complete new to react js.i am trying to render a component into my App js,when i render it as component like things goes well but when i try to render it as a Route i am getting this error i tried some available solution form stackoverflow like importing it as 'react-route-dom',Routes instead of Router but still unable to fix this bug.please guide me to fix this bug

enter code here
import {
BrowserRouter as Router,
Route,
    }   from "react-router-dom";

import './App.css';
import Header from './componnents/Header'
import NotesPage from './Pages/NotesPage'
import NotePage from './Pages/NotePage'
function App() {
     return (
             <div className="App">
                   <Header />
                   <Router>
                           <Route exact path="/" component={NotesPage} />
                   </Router>
            </div>);}
            export default App;

this is my error:

   index.tsx:19 
   Uncaught 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>.
at invariant (index.tsx:19:1)
at Route (index.tsx:230:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
invariant @ index.tsx:19
Route @ index.tsx:230
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:6
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 
    
   The above error occurred in the <Route> component:

at Route (http://localhost:3000/static/js/bundle.js:35654:11)
at Router (http://localhost:3000/static/js/bundle.js:35669:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:35149:5)
at div
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:6
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
index.tsx:19 
    
   Uncaught 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>.
at invariant (index.tsx:19:1)
at Route (index.tsx:230:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
invariant @ index.tsx:19
Route @ index.tsx:230
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:6
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7

Answer 1

From the error message, i understand that you use react-router-dom v6. With v6 some components has changed. You should use <Route /> component inside of <Routes /> and use element instead of component as prop.

<Router>
    <Routes>
        <Route exact={true} path="/" element={<NotesPage />} />
    </Routes>
</Router>

Answer 2

As your error message says

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes> .

You need to wrap the Route with Routes

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

<Router>
  <Routes>
    <Route exact path="/" component={NotesPage} />
  </Routes>
</Router>

See more of React Router: https://reactrouter.com/docs/en/v6/getting-started/overview

Answer 3

First, when you encounter a question, you should always look for the answers in the official website of react-router or its github issues to find the closest answers or the same ones, and don't forget to check the library version cause there would be difference between previous and current version.

As mentioned above, Please wrap your <Route> in a <Routes> is exactly the problem lies, so the quickest solution is as following:

//Remember to import {Routes} from 'react-router-dom' first
 <Router>
   <Routes>
     <Route exact path="/" component={NotesPage} />
   </Routes>
 </Router>

Answer 4

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

You just need to add the <Routes></Routes>

The <Router> is component from react-router-dom v5 as you see you have installed react-router-dom v6 and need all the <Route> component to wrapped with <Routes> too.

You can check the docs also for that

https://reactrouter.com/docs/en/v6/getting-started/overview

Your Final result will be like this:

<Router>
  <Routes>
    <Route exact path="/" component={NotesPage} />
  </Routes>
<Router>