React-Router ist nichts anzeigen und auch kein Fehler

Question

Ich versuche, Inventelliste App mit reagieren und redux machen, aber ich habe ein kleines Problem mit brauchen etwas Verständnis darüber.

Ich weiß, wir haben nur wenige Möglichkeiten, reagieren Komponenten und versuchen, so viel wie möglich alle Informationen zu erhalten, aber immer noch nicht sicher, warum dieses Problem auftritt.

Ich habe app.js die mein alle React-Router ist gesetzt dort

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') 
) 

für Kontaktbogen und pagenotfound der Router angezeigt und machen richtig, aber für Add, ist ohne Fehler leere Seite angezeigt werden soll.

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 

, um sicher zu machen, ist es etwas falsch mit React-Router oder die Komponenten, die ich habe mich ändern, um die AddItemForm mit folgendem Code

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

, die normalerweise die mit etwas falsch zeigen Arbeiten beginnen meine Komponenten, aber ich bin nicht in der Lage zu verstehen, was das Hauptproblem ist. Bitte gib mir einen Treffer oder einen Punkt wo ist das Problem oder was ist das anders?

Hier Link von Github für die vollständige Quelle der Anwendung bisher

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

Answer 1

Ich habe versucht, dieses Problem zu reproduzieren. Was ich herausgefunden habe ist, dass Sie auch React für Ihre Komponente zusammen mit PropTypes importieren müssen. So

versuchen React

import React, { PropTypes } from 'react' 

in Ihrer AddItemForm Komponente importieren. Dann hat für mich gearbeitet.