如何使用反應路由器？

-1

它似乎在CommonJS中（對我來說毫無意義），所以當我嘗試並使用它時，有一些關於導出的錯誤未被定義。如何使用反應路由器？

我收集從CommonJS去一些瀏覽器，我可以理解我可以使用browserify或webpack，但我無法繞過任何材料。顯然有一個反應路由器的UMD版本，但我不明白這是什麼意思。

理想情況下，我想要一個不需要任何這些構建階段的反應路由器的版本，或者也許有人可以給我一個單線程shell命令將CommonJS轉換爲JS？

2017-01-16 rich

我希望能提供幫助，但是您想要做的事情還不清楚，請提供一些您想要實現的更多信息 –

我想使用反應路由器。但我不能，因爲它在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" 
    } 
}

來源

2017-01-16 10:38:29

似乎失敗時轉換爲生產與webpack-p與錯誤「警告：[react-router]位置」app1/index.html「不符合任何路線」 – rich

如何使用反應路由器？

回答

相關問題