如何使用反应路由器？

问题描述：

它似乎在CommonJS中（对我来说毫无意义），所以当我尝试并使用它时，有一些关于导出的错误未被定义。如何使用反应路由器？

我收集从CommonJS去一些浏览器，我可以理解我可以使用browserify或webpack，但我无法绕过任何材料。显然有一个反应路由器的UMD版本，但我不明白这是什么意思。

理想情况下，我想要一个不需要任何这些构建阶段的反应路由器的版本，或者也许有人可以给我一个单线程shell命令将CommonJS转换为JS？

我希望能提供帮助，但是您想要做的事情还不清楚，请提供一些您想要实现的更多信息 –

我想使用反应路由器。但我不能，因为它在CommonJS中，我不知道如何使用它（浏览器也没有）。 – rich

react-router支持CommonJS以及JS方法，请通过示例https://fiddle.jshell.net/terda12/mana88Lm/，您不需要将其转换。重要的是你需要了解ES6（ECMA 6），JSX，Babel库....等新的JavaScript语法....等 –

答

ReactRoute 4版应编程如下假设的WebPack服务器

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;

这里exportimport使用babel-preset-es2015

的Node.js的package.json ES6语法

{ 
    "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" 
    } 
}

似乎失败时转换为生产与webpack-p与错误“警告：[react-router]位置”app1/index.html“不符合任何路线” – rich

如何使用反应路由器？

相关推荐