React-Router 路由到类组件答案

【问题标题】：React-Router routing to class componentsReact-Router 路由到类组件
【发布时间】：2020-01-03 07:34:52
【问题描述】：

我正在尝试路由到一个类组件，但它给了我一个错误。当我将组件更改为功能组件时，路由工作。如何路由到类组件？

我是使用 react-router 的新手。我首先有一个要路由到的功能组件。但是一旦我意识到组件需要是一个类，我将它更改为一个类，现在路由显示

“无法获取 /explore/words”。

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

App.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;

Explore.js

import React, { Component } from "react";

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

export default ExplorePage;

预期的结果是看到“探索”标题。我得到的是“无法获取 /explore/words”。

【问题讨论】：

需要明确的是，使用 react-router-dom 并不要求 React 组件是一个类。还要记住，Route 有一个 prop 称为精确，通常与默认/主路由一起使用。
将您的HomePage 也发布到您拥有Link / 导航的位置。
如果你正在使用 webpack，试试这个stackoverflow.com/questions/43209666/…
@isuruAb 谢谢，这是我的实际问题。我在这里阅读并了解了它：tylermcginnis.com/react-router-cannot-get-url-refresh
@AlexanderStaroselsky 谢谢！我认为它是并且正在挠头，为什么会有组件限制。我的问题是缺少 webpack 的配置说明！

标签： javascript reactjs react-router

【解决方案1】：

这工作正常，您只需将 /explore/one 添加到 url 以查看路由是否正常工作。

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

【讨论】：

谢谢，是的，我所做的并没有错。