React.js 路由到“/”会导致 [不能在没有“新”的情况下调用]答案

【问题标题】：React.js Routing to "/" incurs [cannot be invoked without 'new']React.js 路由到“/”会导致 [不能在没有“新”的情况下调用]
【发布时间】：2021-05-25 03:29:13
【问题描述】：

我用npx create-react-app 做了一个反应应用程序。这是我的 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'。这真的没有意义，因为如果路线不是'/'那么一切正常。我什至有确切的属性，所以我不明白这可能是个问题。我的朋友有一个工作示例，但它是基于函数的组件，而不是基于类的组件。我想知道为什么我的代码在这里不起作用。这是他的函数组件：

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

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

export default App;

【问题讨论】：

标签： javascript reactjs routes

【解决方案1】：

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

像您的朋友一样使用component 道具

或

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

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

【讨论】：