Content disappears when using the <Route> tag-CodePudding

When ever i add a <Route> tag to the code everything just disappears from the screen!

the code is fine i guess! there is no warnings showing!!

the output before adding the <Route> tags

and when i add a <Route> tag the output is just not there anymore!!!!

the code before adding the tag:

import React from "react";
import "./App.css";
import Header from "./Header";
import { BrowserRouter, Route } from "react-router-dom";


function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
      </BrowserRouter>
    </div>
  );
}

export default App;

and the code after is really the same but with adding the tags :

import React from "react";
import "./App.css";
import Header from "./Header";
import { BrowserRouter, Route } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Route></Route>
      </BrowserRouter>
    </div>
  );
}

export default App;

And when i added the tags the content disappeared !

CodePudding user response：

Check you're package.json if the version of react-router-dom is 6 then downgrade it to 5 thats where error comes from.

I know this because now npm install install version 6 as its default version but the tutorials and knowledge about react router on line is still for version 5.

so on your package.json change version from 6 to 5.3.0 and run npm install on your terminal

CodePudding user response：

Since the route tag is empty, you aren't returning anything. You need to pass the path and the component that should be rendered for each path. In this case considering you have a single path and want to show Hello World!! when the app starts, you should add

<BrowserRouter>
    <Route exact path="/" component={App} />
</BrowserRouter>

This will render your App component when you start the app. You can add other components for other routes similarly.