3

在我的应用程序中，我使用 React.js 作为我的 javascript 框架，并结合 react-router 进行导航。

我在替换主容器 div 的内容时遇到问题。当我访问一些新路由时，会调用 render 方法激活相应的路由处理程序，但该 html 会附加到主容器 div 的现有内容中，我需要替换它。

Page2Handler 仅将其 html 附加到 App 处理程序在初始页面加载时呈现的现有 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;

客户端.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;

应用程序.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 内部呈现 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 回答