React Router V6 doesn't show up the page?

Alphan 0
Viewed 41

I am trying to use react router v6. However when try those routes below, it just shows an empty page. What could be the problem ?

App.js

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './components/home';

function App() {
  return <BrowserRouter>
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/hi' element={<div>hi</div>} />
      <Route path='/bye' element={<div>bye</div>} />
    </Routes>
  </BrowserRouter>

}

export default App;

Home.jsx

import React from "react";

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

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";


ReactDOM.render(
  <App />, document.getElementById('root'))
frontend reactjs javascript
1 Answers

It works. Check your libraries or Re-Install the Package(npm install).

After deleting package.lock file and node_modules

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
// import Home from "./home";

function Home() {
  return <h1>Home</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/hi" element={<div>hi</div>} />
        <Route path="/bye" element={<div>bye</div>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;
tirth16200
Related