Using BrowserRouter v6, the webpage is not displayed no errors found-CodePudding

import './App.css';
import {BrowserRouter , Route, Routes} from "react-router-dom"
function App() {
return(
<>
<BrowserRouter>
<Navbar/>
<Routes>
    <Title/>
    <About/>
    <SkillsSection/>
    <Mywork/>
    <Route exact path='/contact'>
    <Contact/>
    </Route>   
</Routes>
<Footer/>
</BrowserRouter>
</>
)
}
export default App;

//after applying the routes the webpage is not being displayed in browser and there is no error in code so far//

CodePudding user response：

according to react-router-dom v6 docs, you should pass your component to route as prop,

  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
          <Route path="new" element={<NewTeamForm />} />
          <Route index element={<LeagueStandings />} />
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>

CodePudding user response：

go through this link https://reactrouter.com/docs/en/v6/getting-started/overview

import ReactDOM from "react-dom/client";
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
// import your route components too

const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/content" element={<content />}>
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>
);