Question

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

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

Page2Handler只将其html附加到App处理程序在初始页面加载时呈现的现有html。

我在这里做错了什么？

router.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'));
});

的index.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;

Answer 1

在这种情况下，Page2Handler正在在应用程序中呈现 - 如果您查看路径的结构，以及如何在App中呈现RouteHandler，它应该相当容易看到这是为什么。

要解决此问题，您需要拥有一个通用父页面，例如包含页眉和页脚，然后让您的App和Page2Handler路由与DefaultRoute处于同等级别，就像这样：

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

希望这是有道理的。

与react-router反应：通过替换元素中的内容来渲染组件

1 个答案: