React-Router 路由到类组件

Posted 2023-02-22

【中文标题】React-Router 路由到类组件

【英文标题】：React-Router routing to class components

【发布时间】：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，试试这个***.com/questions/43209666/…

@isuruAb 谢谢，这是我的实际问题。我在这里阅读并了解了它：tylermcginnis.com/react-router-cannot-get-url-refresh

@AlexanderStaroselsky 谢谢！我认为它是并且正在挠头，为什么会有组件限制。我的问题是缺少 webpack 的配置说明！

【参考方案1】：

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

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

【讨论】：

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