2017-01-23 136 views
0

我嘗試使庫存清單應用程序與react和redux,但我有一個小問題需要一些瞭解它。React-Router不顯示任何東西,也沒有錯誤

我知道我們沒有辦法創建反應組件,並嘗試儘可能多地獲取所有信息,但仍不確定爲什麼會發生此問題。

我有app.js這是我所有的陣營,路由器IndexPage設置有

console.log('The application has been start...'); 

import React from 'react' 
import { render } from 'react-dom' 
import { IndexPage } from './modules/IndexPage' 
import { AddItemForm } from './modules/ui/AddItemForm' 
import { PageNotFound } from './modules/PageNotFound' 
import { Router, Route, hashHistory } from 'react-router' 
import routes from './routes' 

window.React = React 

render(
    <Router history={hashHistory}> 
     <Route path='/' component={IndexPage}/> 
     <Route path='/add' component={AddItemForm}/> 
     <Route path='*' component={PageNotFound}/> 
    </Router>, 
    document.getElementById('react-container') 
) 

和PageNotFound路由器顯示和正確渲染,但對於加,是沒有錯誤顯示空白頁。

import { PropTypes } from 'react' 

const AddItemForm = ({ onNewItem=f=>f, router}) => { 
//const AddItemForm =() => { 
    let _itemName 

    const submit = e => { 
     e.preventDefault() 
     onNewItem({ 
      itemName: _itemName.value, 
      itemCount: 1 
     }) 

     router.push('/') 
     _itemName.value = '' 
    } 

    return (
     <form onSubmit={submit} >something 
      <label htmlFor="item-name"> Name Item</label> 
      <input id="item-name" type="text" ref={(input) => _itemName = input } />  
      <button>Add Item</button> 
     </form> 
    ) 
} 
AddItemForm.propTypes = { 
    onNewItem: PropTypes.func, 
    router: PropTypes.object 
} 

export default AddItemForm 

,以確保有什麼問題做出反應的路由器或我做組件我改變AddItemForm與下面的代碼

export const AddItemForm =() => 
    <div> 
     <h1>Oops ! - The page is working!</h1> 
    </div> 

它開始正常工作,顯示有毛病我組件,但我無法理解什麼是主要問題。請給我點擊或指出問題在哪裏,或者有什麼不同?

下面是應用程序的完整源至今github上的鏈接

https://github.com/mavaj/Inventory-List

回答

0

我試圖重現此問題。我想到的是,您還需要爲您的組件連同PropTypes導入React

所以嘗試在AddItemForm組件進口React

import React, { PropTypes } from 'react' 

。然後爲我工作。

+0

可能就是這樣。每個使用'jsx'的類都需要導入'React'(即使你沒有使用'React'本身)。 –

+0

有趣的是,因爲我遵循你的建議,仍然有同樣的問題,這裏是我的項目的完整源代碼在github https://github.com/mavaj/Inventory-List –