어떻게 반응 라우터를 사용할 수 있습니까?

Question

CommonJS (내게 아무 의미도 없음)에있는 것 같아서 사용하려고 할 때 정의되지 않은 수출에 대한 오류가 있습니다.

나는 CommonJS에서 브라우저로 이동하기 위해 모이고 나는 browserify 나 webpack을 사용할 수 있다는 것을 이해할 수있다.하지만 나는 머티리얼 주위로 머리를 감당할 수 없다. 분명히 UMD 버전의 반응 라우터가 있지만 그 의미가 무엇인지 이해할 수 없었습니다.

이상적으로 나는이 빌드 단계를 필요로하지 않는 반응 라우터 버전을 원합니다. 아니면 누군가가 CommonJS에서 JS로 변환 할 수있는 하나의 라이너 쉘 명령을 줄 수 있습니까?

Answer 1

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 구문이다 웹팩 서버를 가정하면 다음 ReactRoute 버전 4는 프로그램되어야

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