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不能顯示組件，但在控制檯中沒有錯誤

回答

相關問題