Question

我在这里遵循了这个教程：https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm 并且在静态HTML构建中构建路由器没有问题。我现在正在将代码解析为我的Web应用程序的单独js文件。

我把REMDOM放在index.js的通常位置，因为它是orginally，当声明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'未定义为no-undef

任何帮助将不胜感激！

Answer 1

在解构赋值ReactRouter中使用它之前，您需要在某处定义var { ... } = ReactRouter;。尝试更改导入语句

import React from 'react-router';

到

import ReactRouter from 'react-router';

React Router V4，var undefined

1 个答案: