React Router V4, var undefined

Question

Ich habe dieses Tutorial hier gefolgt: https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm und baute den Router kein Problem in einem statischen HTML-Build. Ich seze den Code jetzt in separate js-Dateien für meine Webanwendung.

Ich habe die REMDOM an der üblichen Stelle der index.js, wie es ursprünglich war, wie auch immer, wenn die var deklariert, um das Präfix zu verkürzen, es wirft einen nicht deklarierten Fehler. Es funktionierte auf der statischen, also nicht sicher, warum es jetzt jetzt ist. Hier ist, was ich habe:

import ReactDOM from 'react-dom'; 
    import React from 'react-router'; 
    import { Router, Route } from 'react-router' 
    import './index.css'; 
    import App from './App'; 
    import Routes from './Routes'; 
    import Contact from './Pages/Contact'; 
    import Projects from './Pages/Projects'; 
    import Home from './Pages/Home'; 


    var destination = document.querySelector("#root"); 

    var { Router, 
    Route, 
    IndexRoute, 
    IndexLink, 
    hashHistory, 
    Link } = ReactRouter; 

    ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path="/" component={Routes}> 
     <IndexRoute component={Home} /> 
     <Route path="projects" component={Projects} /> 
     <Route path='contact' component={Contact} /> 
     </Route> 
    </Router>, 
    document.getElementById('root') 
    ); 

Und meine Routes.js Datei:

import React from 'react'; 
    import ReactDOM from 'react-dom'; 

    var Routes = React.createClass({ 
     render: function() { 
     return (
    <div> 
     <h1>Simple SPA</h1> 
     <ul className="header"> 
     <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li> 
     <li><Link to="products" activeClassName="active">Products</Link></li> 
     <li><Link to="contact" activeClassName="active">Contact</Link></li> 
     </ul> 
     <div className="content"> 
     {this.props.children} 
     </div> 
    </div> 
    ) 
    } 
    }); 

    export default Routes; 

Jedoch habe ich diesen Fehler bin immer: ./src/index.js Zeile 22: 'ReactRouter' nicht Definierte No-undef

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Sie müssen irgendwo definieren, bevor Sie es in der Destrukturierungszuordnung var { ... } = ReactRouter; verwenden. Versuchen Sie, die Import-Anweisung

import React from 'react-router'; 

zu

import ReactRouter from 'react-router';