React Router gibt eine leere Seite

Question

Ich habe es Rendern in Index.JS der erste. Aber es gibt eine leere Seite ohne Fehler zurück, ich weiß nicht, was ich falsch mache?

Ich habe kleine Seiten für Sachen und Kontakt nur für den Inhalt beim Navigieren.

import React from 'react'; 
    import ReactDOM from 'react-dom'; 
    import App from './App'; 
    import './index.css'; 
    import Home from './home'; 
    import Stuff from './stuff'; 
    import Contact from './contact'; 


    var ReactRouter = require('react-router'); 
    var Route = ReactRouter.Route; 
    var Routes = ReactRouter.Routes; 
    var IndexRoute = ReactRouter.IndexRoute; 




    ReactDOM.render(
     <Routes> 
     <Route path="/" component={App}> 
     <IndexRoute component={Home}/> 
     <Route path="stuff" component={Stuff} /> 
     <Route path="contact" component={Contact} /> 
     </Route> 
     </Routes>, 
     document.getElementById('root') 
    ); 



import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import Alert from 'react-s-alert'; 
import 'react-s-alert/dist/s-alert-default.css'; 
import 'react-s-alert/dist/s-alert-css-effects/bouncyflip.css'; 
import Modal from 'react-awesome-modal'; 
import Examples from './modal'; 
import Home from './home'; 
var ReactRouter = require('react-router'); 
var Link = ReactRouter.Link; 

    class App extends Component { 



     render() { 
     return (

      <div className="App"> 
      <div className="App-header"> 
       <img src={logo} className="App-logo" alt="logo" /> 

       <h2>Welcome to React</h2> 
       <ul className="nav"> 
       <li><Link to = "/">Home</Link></li> 
       <li><Link to = "/stuff">Stuff</Link></li> 
       <li><Link to = "/contact">Contact</Link></li> 
       </ul> 

       <div className="content"> 
       {this.props.children} 
       </div> 
      </div> 

    export default App; 

Answer 1

Sie haben Ihre Routen mit <Router></Router> Komponente wickeln, nicht <Routes />:

import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

ReactDOM.render(
     <Router history={browserHistory}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home}/> 
      <Route path="stuff" component={Stuff} /> 
      <Route path="contact" component={Contact} /> 
     </Route> 
     </Router>, 
     document.getElementById('root') 
    );