2017-08-08 109 views
-1

我已經按照這個教程在這裏:https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm 和構建路由器沒有問題,在靜態的HTML構建。 我現在將代碼解析爲單獨的js文件以供我的web應用程序使用。反應路由器V4,var undefined

我已經把REMDOM放在了index.js的平常位置,因爲它最初是在聲明var來縮短前綴時拋出未聲明的錯誤。 它工作在靜態,所以不知道爲什麼現在。下面是我的了:

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

而且我Routes.js文件:

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; 

但是我得到這個錯誤: ./src/index.js 第22行: 'ReactRouter' 不是定義爲無undef

任何幫助將不勝感激!

+0

以及你沒有命名變量'ReactRouter' ......所以啊... – Neal

回答

0

您需要先在某處定義,然後才能在解構賦值var { ... } = ReactRouter;中使用它。嘗試改變import語句

import React from 'react-router'; 

import ReactRouter from 'react-router';