Content disappears when using the <Route> tag

user_14706822 0
Viewed 269

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 a picture before 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 !

react-router-dom react-router reactjs javascript
3 Answers

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

user_23508080

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.

user_181753000

There are few things to do : a) in react-router-dom v6 Route element should be inside Routes element. b) instead of component attribute you will have element attribute c) element attribute should contain jsx like below

<Routes>
   <Route exact path="/" element={
      <>
        <SomeComponent></SomeComponent>
        <SomeOtherComponent></SomeOtherComponent>
      </>
    }>
    </Route>
    <Route path='/other_address' element={<OtherComponent />}></Route>
</Routes>
user_164100110
Related