Установленный React-Router - URL меняется, но не вид

Question

Я использую React-Router впервые. Я пытаюсь получить кнопки на главной странице go для соответствующего URL, но когда я нажимаю на кнопку, URL-адрес изменяется, но не вид. Я не получаю никаких ошибок на консоли, либо. Мне было интересно, если кто-то может указать, что происходит. Я обернул каждую кнопку ссылкой и назначил путь, по которому она должна быть go при нажатии. Мне было интересно, если кто-нибудь может указать, что я делаю неправильно.

Домашняя страница. 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;

Приложение. 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;

Индекс . 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

Ваш коммутатор соответствует первому маршруту каждый раз. Вам нужно использовать

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

Answer 2

Попробуйте разместить маршрут root в конце списка.

Так как:

A <Switch> просматривает свои дочерние элементы <Route> s и отображает первый, соответствующий текущему 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 3

Вы можете использовать свойство exact на своих маршрутах.

При значении true будет совпадать только в том случае, если путь точно соответствует location.pathname.

Вы можете прочитать больше здесь https://reacttraining.com/react-router/web/api/Route/exact-bool

Результат должен быть примерно таким:

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