I'm new to react and want to learn about browser routers but the browser router is not rendering

import React from 'react';
import ReactDOM from 'react-dom\client';
import { BrowserRouter,Route,Routes } from 'react-router-dom';
import Home from './pages/Home';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
    <Routes>
    <Route index element={<Home/>}/>
    </Routes> 
  </BrowserRouter>


);

The Home component is perfectly rendering with react strict mode but it is not rendering with browser router can someone explain why Iam getting this issue?

This is my Home.jsx file

import React from 'react'

export default function Home() 
{
  return (
    <div>Home</div>
  )
}

The error I'm getting :

Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (react.development.js:1625:1)
    at BrowserRouter (index.tsx:151:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at performSyncWorkOnRoot (react-dom.development.js:26085:1)

CodePudding user response：

You must specify the path prop to the <Route> component.

<Route index path="/" element={<Home/>}/>

CodePudding user response：

Use BrowseRouter in index.js and wrap your App.

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
   <App />
</BrowserRouter>

and in App.js

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

function App() {
  return (
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/home" element={<Home/>} />
        <Route path="/about" element={<About />} />
       ... ...
      </Routes>