React路由器v4不能显示组件，但在控制台中没有错误

我是一个noob，刚刚开始学习React几天前。我在使用反应路由器v4时遇到问题。React路由器v4不能显示组件，但在控制台中没有错误

我有一个主页组件，像这样：

import React, {Component} from 'react'; 

class AboutPage extends Component { 
    render() { 
     return (
      <div> 
       <h1>About</h1> 
       <p>this is the about page</p> 
      </div> 
     ); 
    } 
} 

export default AboutPage;

这里是App.js：

import React, { Component } from 'react'; 
import './App.css'; 
import { 
    Link, Route, Switch,BrowserRouter 
} from 'react-router-dom' 
import Header from './components/common/Header'; 
import HomePage from './components/home/HomePage'; 
import AboutPage from './components/about/AboutPage'; 



class App extends Component { 
    render() { 
    const home =() =><h1> Home </h1> 
    const about =() =><h1> about </h1> 

    return (
     <BrowserRouter> 
     <div className="container-fluid"> 
      <Header/> 
      <Switch> 
      <Route exact path="/" components={home}/> 
      <Route path="/about" components={about}/> 
      </Switch> 
     </div> 
     </BrowserRouter> 

    ); 
    } 
} 



export default App;

头文件只是一个导航元素我想为所有的零件。

问题是如果我点击主页或关于页面，它不会显示这些组件的内容。它只是显示导航元素，这就是全部。

我使用creat-react-app构建了这个应用程序。我的代码有什么问题吗？谢谢。

来源

2017-06-04 Yuzong

阅读文档看起来像'Route'组件期待属性'component'而不是组件。我也相信你想呈现的是你的“主页”和“AboutPage”组件 – emattiazzi

你是绝对正确的！我不敢相信我犯了这么粗心的错误。 – Yuzong

阅读文档看起来像Route组件期望属性component而不是组件。我也相信你想要渲染的是你的HomePage和AboutPage组件

来源

2017-06-06 11:06:49 emattiazzi

React路由器v4不能显示组件，但在控制台中没有错误

回答

相关问题