Javascript 为什么我的路由器返回空白页？

我正在使用最新版本的create react应用程序。我已经搜索了所有教程，并尝试了一些不同教程的网站，但我没有得到错误

我正在尝试返回我的应用程序中的页面。我已经完成了功能组件和基于类的组件，但没有外观。作为回报，我尝试过包装，但它无法呈现。所有应用程序均正常工作，但页面内容不显示：(

About.js和Home.js是一样的：

import React from 'react';

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

export default About;

从“React”导入React；
const About=（）=>(
关于
);
导出默认值约为；

Nav.js非常简单：

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import './css/Nav.css';

const Nav = () => (
    <ul>
        <li>
            <NavLink
                activeClassName="active"
                to="/">Home</NavLink>
        </li>
        <li>
            <NavLink
                activeClassName="active"
                to="/about">Admin</NavLink>
        </li>
    </ul>
);

export default Nav;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，NavLink}；
导入“/css/Nav.css”；
常量导航=（）=>(


家


管理


);
导出默认导航；

最后是index.js

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import {
      BrowserRouter as Router,
      Route,
      Switch
    } from "react-router-dom";
    import registerServiceWorker from './misc';

    // COMPONENTS
    import Nav from './nav/Nav';

    // PAGE COMPONENTS
    import Home from './pages/Home';
    import About from './pages/About';
    import Page404 from './pages/404';

    // CSS
    import './css/Index.css';

    // CONSTRUCT
    class SmartApartmentApp extends Component {
      render() {
        return (
          <Router>
            <div className="App">
                <Nav />
                <Switch>
                  <Route exact path="/" Component={Home} />
                  <Route path="/about" Component={About} />
                  <Route component={Page404} />
                </Switch>
                <Footer />
            </div>
          </Router>
        );
      }
    }

    // EXECUTE
    export default SmartApartmentApp;
    ReactDOM.render(<SmartApartmentApp />, document.getElementById('root'));
    registerServiceWorker()

;

import React，{Component}来自'React'；
从“react dom”导入react dom；
进口{
BrowserRouter作为路由器，
路线,，
转换
}从“反应路由器dom”；
从“/misc”导入registerServiceWorker；
//组成部分
从“./Nav/Nav”导入导航；
//页面组件
从“./pages/Home”导入主页；
从“./pages/About”导入关于；
从“./pages/404”导入Page404；
//CSS
导入“./css/Index.css”；
//构造
类SmartApartmentApp扩展组件{
render（）{
返回(
);
}
}
//执行
导出默认SmartApartmentApp；
ReactDOM.render（，document.getElementById（'root'））；
registerServiceWorker（）
;

这个问题是因为使用了错误的道具名称

在

路线中

标记使用

组件

道具名称，而不是

组件

例如

<Route path="/about" Component={About} />

应该是：

<Route path="/about" component={About} />

---

这个问题是因为使用了错误的道具名称

在

路线中

标记使用

组件

道具名称，而不是

组件

例如

<Route path="/about" Component={About} />

应该是：

<Route path="/about" component={About} />

使用组件属性，而不是组件

使用组件属性，而不是组件

我认为您需要将确切的道具添加到您的主路线中，如下所示：

使用组件，而不是Component@IgorStecyura非常感谢。请创建一个回答，这样我就可以把它标记正确；）@Blackbenkid创建：）我想你需要像这样给你的回家路线添加准确的道具：

使用组件，而不是Component@IgorStecyura非常感谢你。请创建一个答案，以便我将其标记为正确；）@黑孩子创造了：）