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ビルドの場合はreact-router installation instructionsという文の末尾に.Routerを追加します。

うまくいけば助けてください！

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

出典

2017-01-17 19:19:14

それはどちらか動作しません...あなたの提案の後、私はまた、同じ行にそれを置くことを試みたが、それReactDOM.render（<ルートパス= "/"コンポーネント= {ホーム} />、document.getElementById（ 'app'））; ' –

取得されているホームコンポーネントに問題がある可能性があります/注射し、そのコードを共有してください。私はまたあなたのメインエントリーポイント、HTML要素をid 'app'で共有します。それ以外の場合は、ビルドの問題（webpack）かもしれません。 –

私はそれをテストし、はうまく動作します。オリジナルの投稿をさらに最小限の例で更新し、あなたが質問したようにindex.htmを追加しました。 Webpackビルドの問題であれば、どうすれば問題を攻撃できますか？残念ながら、どこから始めたらいいのかわかりません。 –

上記のコメントのように、回答はブラウザ履歴部分を指定しません。

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でのリアクションルーティング

答えて

関連する問題