我做错了什么吗?当我访问此 URL http://localhost:7000/#/about 时,this.props.children 不会被渲染
--//文件名:main.js
import React from 'react';
import { Router, Route, Link } from 'react-router';
import { history } from 'react-router/lib/BrowserHistory';
import Wrapper from "./components/Wrapper.react";
import ThumbnailContainer from './components/ThumbnailContainer.react';
React.render((
<Router history={history}>
<Route path="/" component={Wrapper}>
<Route path="/about" components={ThumbnailContainer}>
</Route>
</Route>
</Router>
), document.body);
--//文件名:Wrapper.react.js
var Wrapper = React.createClass({
getInitialState: function() {
return(
{
className : "p-wrapper p-blue-theme"
}
);
},
render: function () {
return(
<div className={this.state.className} >
{this.props.children}
</div>
);
}
});
exports['default'] = Wrapper;
module.exports = exports['default'];
--//文件名:ThumbnailContainer.react.js
var React = require('react');
var ThumbnailContainer = React.createClass({
render: function(){
return (
<div className="p-thumbnail-container">
<a className="p-thumbnail" href="#">
<div className="p-thumbnail-img-container">
<img src="http://placehold.it/200x200" className="p-thumbnail-img" />
</div>
<div className="p-thumbnail-caption">
<h3 className="p-title">Thumbnail Title</h3>
<h4 className="p-sub-title">Thumbnail Sub Title</h4>
<p className="p-description">Thumbnail Description Lorem Ipsum</p>
</div>
</a>
</div>
);
}
});
module.exports = ThumbnailContainer;
最佳答案
将 Components={ThumbnailContainer} 更改为 组件={ThumbnailContainer}。
关于javascript - React router 1.0.0-beta3 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31475689/