我的React Router Links无法正常工作。它显示了浏览器中的URL更改但内容未显示

Question

我的文件夹结构

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

＆LT; ------------- ------------ index.js＆GT;

import React from 'react';

import { render } from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import ReactDOM from 'react-dom';
import Header from './Component/Header';
import Footer from './Component/Footer';
import Content from './Component/Content';
import About from './Component/about';
import Contact from './Component/Contact';
import JSON from  './Component/db.json';





class App extends React.Component {

    state = {
        items:JSON
    }


   render() {
  //    console.log(this.state.items)
      return (
         <div>
            <Header/>
            <Content list={this.state.items} />
            <Footer />

         </div>
      );
   }
}

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

＆lt; ---------标题组件-------------＆gt;

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

//Component

import About from './about.js';
import Contact from './Contact.js';


class Header extends React.Component {
render() {
  return (
 <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>
  );
}
}



export default Header;

＆LT; ----------内容----------------＆GT;

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;

＆LT; --------- ---------- footer.js＆GT;

   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;

＆LT; --------- ----------约GT＆;

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;

＆LT; ------------ ----------联系＆GT;

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;

＆lt; -----------代码结束--------＆gt;

我是新手做出反应并尝试实施反应路由器。但是我遇到了一个问题 - 每当我点击“关于”和“联系”链接时，网址会在浏览器中发生变化，但内容不会显示在浏览器中。我在Components文件夹中为“about”和“contact”创建了单独的内容。另外，我使用Sublime文本3并使用Babel for ES-6作为插件，但它显示语法错误。我还附上了截图显示问题

Answer 1

您使用大写字母编写组件属性，因此Component应为component：

所以而不是：

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

你应该：

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

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

//Component

import About from './about.js';
import Contact from './Contact.js';


class Header extends React.Component {
render() {
  return (
 <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>
  );
}
}



export default Header;

将path prop值用于大写不是一个交易破坏者，因为它默认情况下不区分大小写，但建议<Route>路径道具与您在{{<Link>道具上定义的道具相同。 1}}，如果您在sensitive元素上定义了<Route>之类的道具。

在这种情况下，您的最后一段代码应如下所示：

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

您可以在文档 here 中详细了解这一点。

Answer 2

Link路径定义为/about和/contact，其中Route路径为/About和/Contact，请注意大写第一个字符，因此它不匹配，也路由接受小写component道具而不是Component

<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>