javascript - React router 1.0.0-beta3 无法正常工作

标签 javascript reactjs browserify react-router

我做错了什么吗?当我访问此 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/

相关文章:

javascript - 在 Javascript 中,是否保证 {} !== {}?

javascript - 无法访问 React 组件中的 Redux 状态

javascript - 浏览器内的Node JS fs模块

javascript - this.props 在子组件的 console.log 中工作,但不渲染

javascript - 浏览器 API : how to pass advanced option to script

javascript - 以 CommonJS View 方式导入 fullPage.js

javascript - 使用 npm 请求库时未保存 Cookie

javascript - 使用 javascript 为 CSS 创建一个新的单位类型?

javascript - 如何提醒用户 Chrome 应用程序更新?

javascript - 如何使常规 javascript 在 React 应用程序中工作