3

私のアプリでは、ナビゲーション用の react-router と組み合わせて、React.js を JavaScript フレームワークとして使用しています。

メイン コンテナ div のコンテンツを置き換える際に問題があります。新しいルートにアクセスすると、render メソッドを呼び出して適切なルート ハンドラーがアクティブになりますが、その html はメイン コンテナー div の既存のコンテンツに追加されるため、置き換える必要があります。

Page2Handler は、最初のページの読み込み時に App ハンドラーがレンダリングする既存の html にその html を追加するだけです。

ここで何が間違っていますか？

ルーター.jsx:

var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, RouteHandler, Link } = Router;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

var App = require('./app');
var Page2Handler = require('./pages/Page2Handler');

var MyRoutes = (
    <Route name="app" path="/" handler={App}>
        <Route name="page2" path="/page2" handler={Page2Handler} />

    </Route>
);

module.exports=MyRoutes;

client.jsx:

var MyRoutes = require('./router');

Router.run(MyRoutes, function (Handler) {
  React.render(<Handler/>, document.getElementById('container'));
});

インデックス.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
</head>
<body>

    <div id="container"></div>
    <script type="text/javascript" src=""~/build/client.js"></script>

</body>
</html>

Page2Handler:

var React = require('react');

var Page2Handler = React.createClass({
mixins: [ Router.State ],
    render: function() {
        return (
              <div>Hello Page2Handler </div>
        );
    }
});

module.exports=Page2Handler;

App.jsx:

    var React = require('react');
    var Router = require('react-router');
    var { Route, DefaultRoute, RouteHandler, Link } = Router;

    var Header = require('./modules/header');
    var Footer = require('./modules/footer');
    var SearchPartners = require('./modules/partners/search-partners')

    var App = React.createClass({
        render: function() {
            return (
                <div>
                    <Header />

                    <div id="body">
                    <SearchPartners />
                         <RouteHandler />
                    </div>

                    <Footer />
                </div>
            );
        }
    });

    module.exports=App;
4

1 に答える 1

2

この場合、Page2Handler はApp内でレンダリングされています。ルートの構造と、App 内で RouteHandler をどのようにレンダリングしているかを見ると、その理由はかなり簡単にわかります。

これを修正するには、ヘッダーとフッターなどを含む一般的な親ページを用意し、次に示すように、App と Page2Handler のルートを DefaultRoute と同じレベルに設定します。

<Route name="someparent" path="/" handler={ParentHandler}>
  <DefaultRoute handler={App}>
  <Route name="page2" path="/page2" handler={Page2Handler} />
</Route>

それが理にかなっていることを願っています。

于 2015-03-15T17:55:05.427 に答える