React Router возвращает пустую страницу

Question

У меня есть рендеринг в Index.JS первый. Но он возвращает пустую страницу без ошибок, я не знаю, что я делаю неправильно?

У меня есть небольшие страницы для материалов и контакт только для контента при навигации.

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

Вы должны обернуть свои маршруты с <Router></Router> компонентом, а не <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') 
    );