javascript - root id 中没有呈现任何内容

Question

我的页面上没有任何内容呈现，我很困惑。我想知道是否有人可以帮助我解决这个问题

应用程序.js:

import React from "react";
import Header from "../layout/Header/Header";
import Footer from "../layout/Footer/Footer.jsx";

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from "react-router-dom";

import NotFound from "./NotFound";

import Home from "../pages/Home";
import Pricing from "../pages/Pricing";
import Contact from "../pages/Contact";
import About from "../pages/About";
import Dashboard from "../pages/Dashboard";
import Signin from "../pages/Signin";


class App extends React.component {
  render() {
    return (
      <>
        <div className="App">
          <Header />
          <Router>
            <App />
            <Switch>
              <Route exact path="/home" component={Home} />
              <Route exact path="/about" component={About} />
              <Route exact path="/contact" component={Contact} />
              <Route exact path="/pricing" component={Pricing} />
              <Route exact path="/dashboard" component={Dashboard} />
              <Route exact path="/signin" component={Signin} />
              <Route component={NotFound} />
              <Redirect from="/" to="home" />
            </Switch>
          </Router>
        </div>
        <Footer />
      </>
    );
  }
}

export default App;

这是我的index.js:

import React from "react";
import { render } from "react-dom";

import App from "./components/App/App";

//import Signup from "components/pages/SignupBRUH";
import "./styles/styles.scss";

render(<App />, document.getElementById("root"));

我的项目也在使用护照，如果这有什么帮助的话。这可能是路线错误或其他错误。我不知道。

如果有人能帮我解决这个问题那就太好了，谢谢。

Answer 1

您可以尝试为应用程序组件渲染以下内容，以确保模板正确连接

class App extends React.component {
  render() {
    return (
      <>
        <div>
            App Component
          </div>
      </>
    );
  }
}