react-router-dom中Route方法不生效导致页面空白问题

代码存在1个直接导致路由区域空白的核心错误，2个影响路由逻辑合理性的次要问题：

• 核心错误：Route组件的组件传参属性名拼写错误。React Router v5 中，指定路由匹配后渲染组件的属性为小写开头的component，代码中写为大写开头的Component，路由内部无法读取到要渲染的组件配置，匹配路径后返回空内容，对应路由区域无内容渲染。
• 次要问题1：已导入Switch组件但未使用。未被Switch包裹的路由会同时渲染所有路径匹配的组件，不符合常规单页应用的路由互斥渲染逻辑。
• 次要问题2：未配置根路径/的路由匹配规则，访问域名根路径时不会渲染任何业务组件。

1. 将所有Route标签上的Component属性改为小写component
2. 用Switch包裹所有路由规则，保证同一时间仅渲染第一个路径匹配的路由
3. 增加根路径的路由规则，可直接匹配Home组件，或配置重定向到/home
4. 移除未使用的Component导入，代码为函数组件，不需要引入React的Component类

import Contactus from './Contactus';
import Navbar from './Navbar';
import Home from './Home';
import Services from './Services';
import {BrowserRouter as Router, Switch, Route, Redirect} from 'react-router-dom';
import React from 'react';


function App() {
  return (
    <div className="App">
      <h1>This is React Router</h1>
      <Router>
        <Navbar/>
        <Switch>
          {/* 根路径重定向到/home */}
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
          <Route path="/home" component={Home} exact />
          <Route path="/services" component={Services} exact />
          <Route path="/contactus" component={Contactus} exact />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

注：Navbar作为全局常驻导航组件放在Switch外层是正确写法，所有路由下都会正常展示导航栏。

内容的提问来源于stack exchange，提问作者Ramzy Syed