複数のReactJSコンポーネントを同じバンドル内の異なるページに配置する

Question

複数のReactJSコンポーネントを同じバンドルに配置しようとしていますが、特定のコンポーネントを特定のページにロードしたいだけです。私が持っている

コンポーネント： 1.検索は - 私は検索コンポーネントに含まれるようにしたい検索バー、改ページと検索結果、および（ウィザード形式でマルチページ） 2.プロファイルのフォームをフィルタリング明らか

が含まれますプロファイルページの検索ページとプロファイルコンポーネントのみ。そして、パフォーマンスと最適化の理由から、私は同じバンドルのすべてを（gruntとbrowserifyを使って）欲しいと思っています。

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var Search = require('./Search'); 
var Profile = require('./Profile'); 

ReactDOM.render(
    React.createElement(Profile, null), 
    document.getElementById('reactWrapperProfile') 
); 
ReactDOM.render(
    React.createElement(Search, null), 
    document.getElementById('reactWrapperSearch') 
); 

その後、私はreactWrapperProfileとreactWrapperSearchの両方が、それは投げるだろう、他の複数のページまたは全体に作成されなければならないことを実現：

Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element. 

それは私が私のファイルのいずれかで、次のようにレンダリングしていすべてのコンポーネントをレンダリングしてCSSを使用して非表示にするのは理想的ではありません。このようなシナリオでは、ベストプラクティスまたはソリューションとは何でしょうか？

ありがとうございました。

Answer 1

複数のページを含むウェブサイトを作成する場合は、react-routerをお勧めします。リポジトリに複数の例があり、どのように動作するかを見ることができます。あなたのインデックス（バンドル・インデックス）ファイルは次のように、たとえば、その後になります。あなたがグーグルをしようとした場合

// ... 
ReactDOM.render((
<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="search" component={Search}/> 
     <Route path="profile" component={Profile}/> 
    </Route> 
    </Router> 
), document.body); 

は、あなたはまた、「ルータのチュートリアルを反応させる」ためのチュートリアルをたくさん見つけることができます。

これが役に立ちます。

お問い合わせ