React.js 路由到“/”会导致 [无法在没有 'new' 的情况下调用]

Question

我用 npx create-react-app 制作了一个 React 应用程序。这是我的 app.js:

import React, { Component } from "react"
import { render } from "react-dom";
import HomePage from "./components/HomePage";
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom"

export default class App extends Component {
    constructor(props) {
        super(props);
    }

    render(){
        return (
            <BrowserRouter>
                <Switch>
                    <Route exact path='/'>{HomePage}</Route>
                </Switch>
            </BrowserRouter>
            );
    }
}

这里的一切对我来说都很好，但是当我运行使用 yarn start 时，我得到了这个错误 TypeError: Class constructor HomePage cannot be invoked without 'new'。这真的没有意义，因为如果路由不是“/”，那么一切正常。我什至有确切的属性，所以我看不出这有什么问题。我的朋友有一个工作示例，但它是一个基于函数的组件，而不是基于 class 的组件。我想知道为什么我的代码在这里不起作用。这是他的功能组件：

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route path = "/" component={HomePage} exact/>

        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Answer 1

不管你的HomePage组件是基于Class还是Function，react-router-dom的正确使用方式是Route

像朋友一样使用 component 道具

或

使用 render 属性并将您的组件作为 JSX 传递

<Route path = "/" render={() => <HomePage/>} exact/>

React.js 路由到“/”会导致 [无法在没有 'new' 的情况下调用]

React.js Routing to "/" incurs [cannot be invoked without 'new']

javascript

routes

reactjs