React Routing with Navbar only showing blank screen

Question

I have been trying to route to different pages in my react site but for some reason the whole page goes blank as soon as I add any routing. I am using npm and react bootstrap

Here is my code, I am trying to route to simple pages like Home.

App.js

import Artists from './Artists';
import Home from './Home';
import Music from './Music';
import Navigation from "./Navigation.js";
import 'react-bootstrap/dist/react-bootstrap.min.js';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Footer from './footer'

function App() {
  return (
    <div className="App">
      <Router>
        <Navigation></Navigation>
        <Route exact path="/" component={Home}></Route>
        <Route path="/artists" component={Artists}></Route>
        <Route exact path="/music" component={Music}></Route>
      </Router>
      <Footer/>
    </div>
  );
}

export default App;

Navigation.js

import React from "react";
import { Button, Navbar, Container} from 'react-bootstrap'
import { Link, Router, Route } from "react-router-dom";
import Nav from "react-bootstrap/Nav";
import { LinkContainer } from "react-router-bootstrap";
import Artists from './Artists'
import Home from './Home'

const Navigation = () => {
  return (
    <Navbar bg="light" variant="light">

      <Navbar.Brand>
        <img src={require('.//Nothing Iconic Reccords.png')} width="135"
        height="135"/>
      </Navbar.Brand>

      <Nav className="nav-link">
        <LinkContainer to="/">
          <Nav.Link>Home</Nav.Link>
        </LinkContainer>
        <LinkContainer to="/artists">
          <Nav.Link>Artists</Nav.Link>
        </LinkContainer>
        <LinkContainer to="/music">
          <Nav.Link>Music</Nav.Link>
        </LinkContainer>
      </Nav>
    </Navbar>
  );
};

export default Navigation;

I don't see any overt issues with the code. Could you verify what versions of React and `react-router-dom` you are using? From the project directory run `npm list react react-router react-router-dom` and report back the installed versions. — Drew Reese, Apr 25 '22 at 16:19

score 1 · Answer 1 · edited Apr 25 '22 at 04:06

1

Try using routes, put route in routes and add props element in route:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/artists" element={<Artists />} />
    <Route path="/music" element={<Music />} />
  </Routes>
</Router>

edited Apr 25 '22 at 04:06

Zach Jensz

3,650
5
15
30

answered Apr 25 '22 at 02:44

Azim B

11
2

This only works if the user is using react router 6 (most recent version). If they are using an older version, this breaks routing completely – Arky Asmal Apr 25 '22 at 05:52

Arky Asmal · Answer 2 · 2022-04-25T05:54:52.787

0

For react router 5 or below

You're missing an important wrapper called <Switch> that wraps around your routes (<Route> elements), in your App.js file. Here's the quickstart guide describing the structure.

<Router>
   <Switch>
       <Route path="/about">
           <About />
       </Route>
   </Switch>
</Router>

Without this wrapper (or similar ones as described in the documentation) , react router doesn't know what matching logic you want to apply, so it can't render a specific page/route.

If you are using React router 6 (most recent version), the entire syntax needs to be re-written.

For React router 6 (most recent version) The you have to order your routes like so:

<BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}/>
    </Routes>
  </BrowserRouter>

This is link goes more in-depth about this

edited Apr 25 '22 at 05:54

answered Apr 25 '22 at 01:29

Arky Asmal

1,162
4
10

I'm afraid react documentation isn't going to help you in this case. Its documentation is unfortunately for an unknown reason not updated yet and has been replaced by . – Sharjeel Faiq Apr 25 '22 at 05:16
@SharjeelFaiq It does still help. It depends on the version of react router that the asker is using. The documentation on react router's site today, is pointing to React Router Version 6 (most recent version). The asker is using syntax from version 5, but there is still an error, despite it being from version 5. I updated my answer for clarity – Arky Asmal Apr 25 '22 at 05:50
The `Switch` component isn't required to be used at all. Its only purpose is to switch from *inclusive* route matching within a router component to *exclusive* route matching within a `Switch` component. – Drew Reese Apr 30 '22 at 08:45

Sharjeel Faiq · Answer 3 · 2022-04-25T22:59:07.693

You need to carefully read the react-router-dom documentation. According to the documentation,

If you're using the latest version of react-router-dom i.e. @6.3.0, you must use { Routes } instead of { Switch }. Otherwise, you're good to go with { Switch } for older versions of react-router-dom.

You must import { BrowserRouter as Router, Switch, Route } from "react-router-dom" in your App.js file.
You only need to wrap your respective routes inside the Router element and leave everyother component outside of element i.e. component.
You need to write your components in the form of HTML elements inside tag.

Your App.js file should look as same as the one below:

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Artists from './Artists';
import Home from './Home';
import Music from './Music';
import Navigation from "./Navigation.js";
import 'react-bootstrap/dist/react-bootstrap.min.js';
import Footer from './footer'

export default function App() {
  return (
    <Router>
        <div>
            <Navigation/>
            <Switch>
                 <Route exact path="/" component={<Home />} />
                 <Route path="/artists" component={<Artists />} />
                 <Route exact path="/music" component={<Music />} />
            </Switch>
      </div>
    </Router>
  );
}


export default App

If you want to get a specific component on some action e.g. onClick, like inside a navigation component, you only need to import { LinkContainer } or { Link } from "react-router-dom", because Link and LinkContainer, both behave the same way. So you don't need to import both of them at a time in a single file. Importing Router and Route make no sense in the Navigation.js file. Since you are not making any use of the Artist and Home components inside the Navigation.js file, you are not required to import them into Navigation.js.

Your Navigation.js file should look as same as the one below:

import { link } from "react-router-dom"
import React from "react";
import { Button, Navbar, Container} from 'react-bootstrap'
import Nav from "react-bootstrap/Nav";

const Navigation = () => {
    return (
        <Navbar bg="light" variant="light">
            <Navbar.Brand>
                <img src={require('.//Nothing Iconic Reccords.png')} width="135" 
                height="135"/>
            </Navbar.Brand>

            <Nav className="nav-link">
                <LinkContainer to="/">
                    <Nav.Link>Home</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/artists">
                    <Nav.Link>Artists</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/music">
                    <Nav.Link>Music</Nav.Link>
                </LinkContainer>

            </Nav>
        </Navbar>
    );
};

export default Navigation;

This only works if the user is using react router 6 (most recent version). If they are using an older version, this breaks routing completely — Arky Asmal, Apr 25 '22 at 05:51
I hope my answer now clarifies the difference between the use of the latest react-router-dom version and the preceding ones. By the way, I'm obliged for the reminder. — Sharjeel Faiq, Apr 25 '22 at 11:48

React Routing with Navbar only showing blank screen

3 Answers3