我怎样才能使用反应路由器?

时间:2017-01-16 09:49:26

标签: javascript reactjs react-router

似乎是在CommonJS中(对我来说没什么意义)所以当我尝试使用它时,导出没有被定义的错误。

我聚集在一起从CommonJS到浏览器,我可以理解我可以使用browserify或webpack但是我无法理解这些材料。显然有一个UMD版本的反应路由器,但我无法理解这意味着什么。

理想情况下,我想要一个不需要任何这些构建阶段的反应路由器版本,或者有人可能会给我一个单线程shell命令来从CommonJS转换为JS?

1 个答案:

答案 0 :(得分:0)

假设webpack服务器

,应将ReactRoute版本4编程如下
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'
import Home from './Home.jsx';
import About from './About.jsx';
import Contact from './Contact.jsx';
import App from './App.jsx';

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>

), document.getElementById('app'))

Home.jsx

import React from 'react';

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}

export default Home;

此处export import是使用babel-preset-es2015

的ES6语法

Node.js package.json

{
  "name": "app1",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.13.2",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.7.0",
    "redux": "^3.5.2",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}