React with react-router：通过替换元素中的内容来渲染组件

Question

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

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

Page2Handler 仅将其 html 附加到应用程序处理程序在初始页面加载时呈现的现有 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 在 inside App 中呈现 - 如果您查看路由的结构，以及在 App 中呈现 RouteHandler 的方式，它应该相当很容易看出原因。

要解决这个问题，您需要有一个通用的父页面，例如包含您的页眉和页脚，然后让您的 App 和 Page2Handler 路由与 DefaultRoute 处于同一级别，如下所示:

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

希望这是有道理的。

React with react-router：通过替换元素中的内容来渲染组件

React with react-router: render component by replacing content in an element

single-page-application

reactjs

react-router