为什么我的 React Router 返回空白页？答案

【问题标题】：Why does my React Router return blank pages?为什么我的 React Router 返回空白页？
【发布时间】：2018-09-18 00:22:45
【问题描述】：

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

我正在尝试返回我的应用程序中的页面。我已经完成了功能组件和基于类的组件，但没有看。我试过换行，但它不会渲染。所有应用程序都可以工作，但页面内容不显示:(

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

import React from 'react';

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

export default 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;

最后是 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()

;

【问题讨论】：

我认为您需要像这样将确切的道具添加到您的家庭路线：<Route exact path="/" Component={Home} />
使用组件而不是组件
@IgorStecyura 非常感谢。请创建一个答案，以便我将其标记为正确；）
@TheBlackBenKid 创建:)

标签： javascript reactjs react-router create-react-app

【解决方案1】：

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

在Route 标签中使用component 道具名称而不是Component

例如

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

应该是：

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

【讨论】：

【解决方案2】：

使用 component 属性而不是 Component。

【讨论】：