已安裝 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

嘗試將您的根路由放在列表的末尾。

自從：

<Switch>查看其子<Route>並呈現與當前 URL 匹配的第一個。

來自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

您的 Switch 每次都與第一條路由匹配。 你需要使用

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

Answer 3

您可以在路線上使用exact屬性。

如果為 true，則僅當路徑與 location.pathname 完全匹配時才會匹配。

你可以在這里閱讀更多https://reacttraining.com/react-router/web/api/Route/exact-bool

結果必須是這樣的：

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