Was ist falsch mit dem Code, wegen dem ich keine Ausgabe im Browser bekomme, obwohl mein Code richtig kompiliert ist?

Question

Zum Installieren von reacts habe ich docs given by facebook verwendet. Und jetzt versuche ich Routing zu implementieren, aber nichts wird in meinem Browser angezeigt. Und noch eine Sache, ich möchte fragen, wo ist die Konfigurationsdatei gemäß dieser Dokumentation.

Package.json Datei

{ 
    "name": "my-app", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-router": "^4.2.0", 
    "react-router-dom": "^4.2.2", 
    "react-scripts": "0.9.5" 
    }, 
    "devDependencies": { 
    "react-hot-loader": "^1.3.1" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
} 

Index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, browserHistory, IndexRoute } from 'react-router' 
import {App} from "./App"; 
import {About} from "./about"; 
import {Contact} from "./contactus"; 
import {Home} from "./Home" 


ReactDOM.render(
    <Router history={browserHistory}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home} /> 
     <Route path={"home"} component={Home} /> 
      <Route path={"about"} component={About} /> 
      <Route path={"contact"} component={Contact} /> 
     </Route> 
     </Router>, 

    document.getElementById('app') 
); 

App.js

import React from 'react'; 

import Link from 'react-router' 
import Home from './Home' 
import About from './about' 
import Contact from './contactus' 

class App extends React.Component { 
    render() { 
     return (
     <div> 
      <ul> 
       <li><Link to="/home"><Home /></Link></li> 
       <li><Link to="/about"><About /></Link></li> 
       <li><Link to="/contact"><Contact /></Link></li> 
      </ul> 


     </div> 
    ) 
    } 
} 




export default App; 

about.js

import React from 'react'; 



class About extends React.Component { 
    render() { 
     return (
     <div> 
      <h1>About...</h1> 
     </div> 
    ) 
    } 
} 

export default About; 

In gleicher Weise habe ich contact.js und home.js. definiert

Fehler auf thr-Browser sieht aus wie

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check your code at index.js:13. 
printWarning @ warning.js:35 
warning.js:35 Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`. 
    in Router (at index.js:11) 
printWarning @ warning.js:35 
Router.js:47 Uncaught TypeError: Cannot read property 'location' of undefined 
    at new Router (Router.js:47) 
    at ReactCompositeComponent.js:294 
    at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:293) 
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187) 
    at Object.mountComponent (ReactReconciler.js:45) 
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257) 
    at Object.mountComponent (ReactReconciler.js:45) 

here is my file structure

Und meine Ausgabe in Browser leer ist. ps: ich bin Anfänger mit ReactJs so erhalten mit schlechter Kodierstruktur beleidigt nicht

Answer 1

Von dem, was ich sehe, Sie verwenden reagieren-Router v4. Stellt sich in v4 browserHistory, IndexRoute ist nicht mehr in v4 existieren. Und verwenden Sie react-router-dom nicht react-router

Mein Vorschlag ist, auf diesen Code zu ändern.

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter as Router, Route } from 'react-router-dom' 
import createBrowserHistory from 'history/createBrowserHistory' 
import App from "./App"; 
import About from "./about"; 
import Contact from "./contactus"; 
import Home from "./Home" 

const customHistory = createBrowserHistory() 

class MainApp extends React.Component { 
    render() { 
    return(
    <Router history={customHistory}> 
     <Route exact path="/" component={App} /> 
     <Route path="/home" component={Home} /> 
     <Route path="/about" component={About} /> 
     <Route path="/contact" component={Contact} /> 
    </Router> 
    ); 
    } 
} 

ReactDOM.render(<MainApp />, document.getElementById('app')); 

Und in App.js zwischen <link>Text</link> Sie hier nicht Bestandteil

App.js

import React from 'react'; 
import {BrowserRouter as Router, Link} from 'react-router-dom' 

class App extends React.Component { 
    render() { 
     return (
     <Router> 
      <div> 
       <ul> 
       <li><Link to="/home">Home</Link></li> 
       <li><Link to="/about">About</Link></li> 
       <li><Link to="/contact">Contact</Link></li> 
       </ul> 
      </div> 
     <Router> 
    ) 
    } 
} 

export default App; 

Es gibt viele Beispiel reagieren-Router v4 Text benötigen https://reacttraining.com/react-router/web/example/basic

Answer 2

Ihre Über-Komponente als Standard exportiert wird, so dass, wenn Sie es importieren möchten Sie diese benötigen:

import About from './about' 

statt

import {About} from './about' 

Es ist ein subtiles und lästiges Problem :)