ES5에서의 반응 라우팅

"[email protected]"및 "[email protected]"을 사용하고 있습니다. ES5에서의 반응 라우팅

나는이 최소한의 예를 가지고 있고 나는 그것이 작동 할 수 없습니다 :

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Router = require('react-router'); 
var Route = Router.Route; 

var Test = React.createClass({ 
    render: function() { 
     return <h1>Test</h1>; 
    } 
}); 

ReactDOM.render(
    <Router> 
     <Route path="/" component={Test}/> 
    </Router>, 
    document.getElementById('app') 
);

나는 ReactDOM.render(<Test/>, ...) 잘 작동하기 때문에 <Test/>은 OK입니다 것을 알고있다.

꿀꺽 그것을 컴파일하지만 페이지가 표시되지 않고 콘솔은 말한다 :

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 
    at invariant (bundle.js:41330) 
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (bundle.js:39575) 
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js:28233) 
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:28160) 
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (bundle.js:35008) 
    at Object.mountComponent (bundle.js:35674) 
    at mountComponentIntoNode (bundle.js:33795) 
    at ReactReconcileTransaction.perform (bundle.js:38439) 
    at batchedMountComponentIntoNode (bundle.js:33816) 
    at ReactDefaultBatchingStrategyTransaction.perform (bundle.js:38439)

편집 :

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>My Page</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/bundle.css" /> 
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    </head> 

    <body> 

     <!--ALL REACT CODE--> 
     <div id="app"></div> 
     <!--ALL REACT CODE--> 

     <script src="scripts/bundle.js"></script> 
    </body> 
    </html>

출처

2017-01-17 Cristina_Oliver

간단한 데모 https://codepen.io/pshrmn/pen/YZXZqM – zloctb

<Router> 요소를 감싸는 시도로 전달되는 index.htm으로를 처음에는 괄호 안의 render()에 들어가 있습니다.

var Test = React.createClass({ 
    render: function() { 
     return (<h1>Test</h1>); 
    } 
}); 

ReactDOM.render((
    <Router> 
     <Route path="/" component={Test}/> 
    </Router> 
), document.getElementById('app'));

구문 분석 문제 일 수 있습니다.

require 문을 react-router으로 업데이트 해보세요. 비 ES6 빌드의 경우 .Router을 react-router installation instructions에 추가합니다.

잘하면 도움이됩니다.

var Router = require('react-router').Router;

출처

2017-01-17 19:19:14

, 나는 또한 같은 줄에 넣어 시도했습니다 그것은 당신의 제안 후 ... 중 하나가 작동하지 않지만 그것을 ReachDOM.render (<경로 경로>/"구성 요소 = {홈} />, document.getElementById ('app')); ' –

검색중인 홈 구성 요소에 문제가있을 수 있습니다./주입, 그 코드를 공유하십시오. 또한 기본 엔트리 포인트 인 HTML 요소 (id는'app')를 공유합니다. 그렇지 않으면 빌드 문제 일 수 있습니다 (webpack). –

테스트 한 결과 이 정상적으로 작동합니다. 원본 게시물을 훨씬 더 최소한의 예제로 업데이트하고 요청한대로 index.htm을 추가했습니다. 웹팩 빌드 문제인 경우 어떻게 문제를 공격 할 수 있습니까? 불행하게도 어디서부터 시작해야할지 모르겠다. –

위의 설명과 마찬가지로 대답은 브라우저 기록 부분을 지정하지 않습니다.

var React = require("react"); 
var ReactDOM = require("react-dom"); 
var SchoolsList = require("./components/SchoolsList.jsx"); 
var Router = require('react-router').Router; 
var Route = require('react-router').Route; 
var Link = require('react-router').Link 
var browserHistory = require('react-router').browserHistory; 

var _question = schoolsStore.getQuestion(); 

function render(){ 
    //console.log(_question); 
    ReactDOM.render(
    <Router history={browserHistory}> 
    <Route path="/" component={SchoolsList} question={_question.question} activeIndex={_question.activeIndex} /> 
    </Router>, 
    document.getElementById("container")); 
} 

render();

출처

2017-05-26 19:09:56 technazi

ES5에서의 반응 라우팅

답변

관련 문제