React-Router不显示任何东西,也没有错误

问题描述:

我尝试使库存清单应用程序与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

我试图重现此问题。我想到的是,您还需要为您的组件连同PropTypes导入React

所以尝试在AddItemForm组件进口React

import React, { PropTypes } from 'react' 

。然后为我工作。

+0

可能就是这样。每个使用'jsx'的类都需要导入'React'(即使你没有使用'React'本身)。 –

+0

有趣的是,因为我遵循你的建议,仍然有同样的问题,这里是我的项目的完整源代码在github https://github.com/mavaj/Inventory-List –