Installed React-Router - The URL changes, but not the view

Question

I am using React-Router for the first time. I am trying to get the buttons on the homepage to go to its respective URL, but When I click on a button, the URL changes, but not the view. I don't get any errors on the console, either. I was wondering if somebody can point out what is happening. I wrapped each button with a link, and assigned the path it needs to go to when clicked. I was wondering if anyone can point out what I am doing wrong.

Homepage.js

import React from 'react';
import {Link} from "react-router-dom"

class HomePage extends React.Component {

    render(){
        return (
            <div>
                 <h1>Welcome</h1>
                <p>Please select a category </p>
                <Link to="/ProgrammingJokes">
                <button>Programming Jokes</button>
                </Link>
                <Link to="/DadJokes">
                 <button>Dad Jokes</button>
                 </Link>
                 <Link to="/SportsJokes">
                <button>Sports Jokes</button>
                </Link>
            </div>
        )
    }
}

export default HomePage;

App.js

import React from 'react';
import HomePage from './components/HomePage'
import DadJokesApi from './components/DadJokesApi'
import SportsJokesApi from './components/SportsJokesApi'
import ProgrammingJokesApi from './components/ProgrammingJokesApi';
import { Route, Switch} from "react-router-dom";

function App() {
  return (
      <main>
        <Switch>
          <Route path="/" component={HomePage} />
          <Route path="/DadJokes" component={DadJokesApi} />
          <Route path="/SportsJokes" component={SportsJokesApi} />
          <Route path="/ProgrammingJokes" component={ProgrammingJokesApi} />
        </Switch>
      </main>

  );
}

export default App;

Index.js

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

ReactDOM.render(
  <BrowserRouter>
    <React.StrictMode>
    <App />
    </React.StrictMode>
  </BrowserRouter>,
  document.getElementById('root')
);

Answer 1

Try placing your root route at the end of the list.

Since:

A <Switch> looks through its children <Route> s and renders the first one that matches the current URL.

From https://reacttraining.com/react-router/web/guides/quick-start

  <Switch>
      <Route path="/DadJokes" component={DadJokesApi} />
      <Route path="/SportsJokes" component={SportsJokesApi} />
      <Route path="/ProgrammingJokes" component={ProgrammingJokesApi} />
      <Route path="/" component={HomePage} />
  </Switch>

Answer 2

Your Switch is matching with the first route every time. You need to use

<Route exact path = '/' component = {Component}/>

Answer 3

You can use the exact property on your routes.

When true, will only match if the path matches the location.pathname exactly.

You can read more herehttps://reacttraining.com/react-router/web/api/Route/exact-bool

The result must be something like this:

  <Route path="/DadJokes" exact component={DadJokesApi} />