React-Router 路由到類組件

Question

我正在嘗試路由到一個類組件，但它給了我一個錯誤。 當我將組件更改為功能組件時，路由工作。 如何路由到類組件？

我是使用 react-router 的新手。 我首先有一個要路由到的功能組件。 但是一旦我意識到組件需要是一個類，我將其更改為一個類，現在路由顯示

“無法獲取/探索/單詞”。

索引.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.querySelector("#root")
);

應用程序.js

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import HomePage from "./pages/HomePage";
import ExplorePage from "./pages/ExplorePage";

function App() {
  return (
    <Router>
    <div>
      <header>
        <nav>Course Finder</nav>
      </header>
        <Route path="/" component={HomePage} />
        <Route path="/explore/:campus" component={ExplorePage} />
    </div>
    </Router>
  );
}

export default App;

探索.js

import React, { Component } from "react";

class ExplorePage extends Component {
  render() {
    return (
      <div>
        <h1>Explore</h1>
      </div>
    );
  }
}

export default ExplorePage;

預期結果是看到“探索”標題。 我得到“無法獲取/探索/單詞”。

Answer 1

這工作正常，您所要做的就是將/explore/one添加到 url 以查看路由是否正常工作。

https://codesandbox.io/embed/nervous-wood-cw8cd