我正在构建我的第一个webapp,使用react js和路由器,因为我想开发一个单页应用程序。我只是用反应路由器做第一个例子并尝试在两个路由之间切换,但是我无法让它工作。我们的目标是拥有一个非常简单的html页面,其中包含一系列链接,并在视图之间进行切换。
当我渲染index.html时,我看到链接列表,但是当我点击链接时,我看到网址路径发生了变化,但页面内容没有变化,不应该做出反应 - 路由器js会处理?我错过了什么?
代码下方:
我的index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>My First Webapp With React</title>
<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="main" class="container">
<!-- The App will be rendered here -->
</div>
<!-- Including the Google Maps API and the GMaps library -->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>
<!-- Our compiled JavaScript source file -->
<script src="./compiled.js"></script>
</body>
</html>
我的main.js文件:
var React = require('react');
var App = require('./components/App');
var About= require('./components/About');
var Router = require('react-router').Router
var Route = require('react-router').Route
React.render(
<Router>
<Route path="/" component={App}>
<Route path="about" component={About}/>
</Route>
</Router>,
document.getElementById('main')
);
我的app.js:
var React=require('react');
var Link=require('react-router').Link;
var App=React.createClass({
getInitialState:function(){
return {}
},
render:function(){
return (<div>
<h1>App</h1>
<ul>
<li><Link to="/about">About</Link></li>
<li><Link to="/inbox">Inbox</Link></li>
</ul>
</div>)
}
});
module.exports = App;
我的about.js
var React=require('react');
var About=React.createClass({
render:function(){
return (<div>This is the about page</div>)
}
});
module.exports=About;
答案 0 :(得分:1)
据我所知,您错过了App组件中的{this.props.children}
。当您单击链接时,React必须知道如何将子组件(来自react-route以处理特定路由)传递给父组件。而且{this.props.children}它就像一个巨大的小号,有助于反应知道应该渲染的组件。
所以它应该是:
//App component
return (<div>
<h1>App</h1>
<ul>
<li><Link to="/about">About</Link></li>
<li><Link to="/inbox">Inbox</Link></li>
</ul>
{this.props.children} // missed
</div>)
React-router Link is here。我希望它会对你有所帮助
由于