my page keeps disappearing when I try to use routes ad route in reacts-CodePudding

I am trying to to use Routes and Route and when I do its not showing home.js I get a blank white page. do I need to download something because it working fine in my other project but I forgot how I did it before.

this is my app.js code

import "./App.css";
import Home from "./components/Home.js";
import Navbar from "./components/Navbar.js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <div>
        <Routes>
          <Route path="/" element={<Home />} exact />
        </Routes>
      </div>
    </div>
  );
}

export default App;

and this is my index.js code

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";


ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

and tis is Home.js

import React from "react";
import Navbar from './Navbar.js';


const Home = () => {
  const text = "Home";

  return (
    <div>
      <h2>{text}</h2>
    </div>
  );
}

export default Home;

CodePudding user response：

I think you didn't call the router at the right place.

You should try this instead:

import "./App.css";
import Home from "./components/Home.js";
import Navbar from "./components/Navbar.js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Home />} exact />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Also remove the BrowserRouter inside your index

import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
import App from "./App";


ReactDOM.render(
    <App />,
  document.getElementById("root")
);

CodePudding user response：

I just did npm install --save react-router-dom and it worked