在我的应用程序中，我使用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;
1 回答
在这种情况下，Page2Handler正在App中呈现 - 如果您查看路由的结构，以及如何在App中呈现RouteHandler，那么应该很容易理解为什么 .
要解决这个问题，你需要有一个通用的父页面，例如，包含你的页眉和页脚，然后让你的App和Page2Handler路由与DefaultRoute处于同等水平，如下所示：
希望有道理 .