반응 목록과 인출액으로 인벤토리 목록 앱을 만들려고합니다. 그러나 그것에 대해 약간의 이해가 필요합니다.React-Router는 아무 것도 표시하지 않고 오류도 표시하지 않습니다.
나는 반응하는 성분을 만들고 가능한 한 모든 정보를 얻으 려하지만이 이슈가 왜 일어나는지 확실하지 않다는 것을 알고 있습니다.
나는 나의 모든 반작용-라우터 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 올바르게 렌더링, 그러나 추가에 대한 오류없이 빈 페이지가 표시되는 app.js 있습니다. 확인하기 위해
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
함께 뭔가 잘못이다 - 반작용 라우터 또는 내가 만든 구성 요소가 나는 일반적으로 작업을 시작 코드 아래
export const AddItemForm =() =>
<div>
<h1>Oops ! - The page is working!</h1>
</div>
으로 AddItemForm 변경에 문제가 내 구성 요소가 있지만 주요 문제는 무엇인지 이해할 수 없습니다. 제게 명중을 부탁하거나 문제가 어디에 있는지 또는 다른 점이 무엇인지 알려주십시오. 여기
는
https://github.com/mavaj/Inventory-List
아마도 그럴 수도 있습니다. 'jsx'를 사용하는 모든 클래스는'React' 자체에서 다른 것을 사용하지 않아도'React'를 가져와야합니다. –
나는 당신의 제안을 따르고 여전히 같은 이슈를 가지고 있기 때문에 흥미 롭다. 여기 github에서 내 프로젝트의 전체 소스가있다. https://github.com/mavaj/Inventory-List –