React-Router路由到类组件

Question

我试图路由到一个类组件，但它给我一个错误。当我将组件更改为功能性组件时，路由就开始工作了。如何路由到类组件？

我刚开始使用React-Router。我首先有一个要路由到的功能组件。但是一旦我意识到组件需要是一个类，我就把它更改为一个类，现在路由显示

“无法获取/探索/单词”。

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")
);

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;

import React, { Component } from "react";

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

export default ExplorePage;

Answer 1

这很好，您所要做的就是在url中添加/explore/one来查看路由的工作情况。

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