React Router Rendering a Blank Screen

Question

I am trying to implement the routing for my application and all of the components work, but as soon as I put the <Router> in the app.js file it renders a blank screen, only displaying the Navbar. Any suggestions as to what might be causing this?

Here is the app.js file

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

function App() {
  return (
    <Router>
      <div>
        <Navbar />

        <Route exact path="/" component={Home} />
        <Route path="/view" component={ViewTicket} />

      </div>
    </Router>
  );
}

export default App;

Answer 1

Check docs basic usage you forgot about Switch component.

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/dashboard">
    <Dashboard />
  </Route>
</Switch>;