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上的链接
答
我试图重现此问题。我想到的是,您还需要为您的组件连同PropTypes
导入React
。
所以尝试在AddItemForm
组件进口React
import React, { PropTypes } from 'react'
。然后为我工作。
可能就是这样。每个使用'jsx'的类都需要导入'React'(即使你没有使用'React'本身)。 –
有趣的是,因为我遵循你的建议,仍然有同样的问题,这里是我的项目的完整源代码在github https://github.com/mavaj/Inventory-List –