Reactjs 我的路由器链接不工作。它在浏览器中显示url更改，但不显示内容

我的文件夹结构

reactdemo
|------------>public
|------------>src
               |------->Component
               |------->index.js  

我是react新手，尝试实现react路由器。但我面临一个问题——每当我点击About和Contact链接时，浏览器中的url都会发生变化，但内容不会显示在浏览器中。我在Components文件夹中为about和contact创建了单独的内容。此外，我使用Sublime text 3和Babel for ES-6作为插件，但它显示了语法错误。我还附加了一个屏幕截图来显示问题

---

您使用第一个大写字母编写component属性，因此component应该是component：

因此，不是：

<Route path='/About' Component={About} /> 
<Route path='/Contact' Component={Contact} />

你应该：

<Route path='/About' component={About} /> 
<Route path='/Contact' component={Contact} />

从“React”导入React； 从'react dom'导入{render}； 从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}； //组成部分 从“/About.js”导入About； 从“/Contact.js”导入联系人； 类头扩展了React.Component{ 渲染{ 回来 家 关于 联系 ; } } 导出默认标题 链接路径被定义为/about和/contact，其中路由路径是/about和/contact，请注意大写的第一个字符，因此它不匹配，路由也接受小写的组件prop和not组件prop

---

你能给我看一下照片的快照吗error@ShubhamKhatri你好，Subham…我已附上屏幕截图。正如您所看到的……当我单击“关于”链接时，内容在浏览器中没有更改，但在url中显示了更改。如果您得到了答案，请接受答案

import React from 'react';

const Content =(props) => {

console.log(props)


  const test = props.list.map((list) => {
    return (
        <div key={list.id}>
        <h4>{list.title}</h4>
        <p>{list.feed}</p>
      </div>
      )

    }
  )


 return (
    <div>
    {test}
    </div>
  )



}

export default Content;

   import React from 'react';

class Footer extends React.Component {
   render() {
      return (
         <div className="text-center">

  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>

        </div>
      );
   }
}

export default Footer;

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';


class About extends Component {
   render() {
      return (
         <div>
            <h2>About</h2>
         </div>
      );
   }
}
export default About;

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';


class Contact extends Component {
   render() {
      return (
         <div>
            <h2>Contact</h2>
         </div>
      );
   }
}
export default Contact;

<Route path='/About' Component={About} /> 
<Route path='/Contact' Component={Contact} />

<Route path='/About' component={About} /> 
<Route path='/Contact' component={Contact} />

<Router>    
     <div>
         <nav className="navbar navbar-expand-sm bg-dark navbar-dark">
              <ul className="navbar-nav">
                  <li className="nav-item">
                     <Link to="/">Home</Link>
                  </li>
                  <li className="nav-item">
                     <Link to="/about">About</Link>
                  </li>
                  <li className="nav-item">
                     <Link to="/contact">Contact</Link>
                 </li>
              </ul>
         </nav>
         <Switch>
             <Route path='/about' component={About} />     
             <Route path='/contact' component={Contact} />
         </Switch>

     </div>
</Router>