react router-哈希更改时未呈现任何组件

Question

我使用Rails与反应宝石和react-router.js内部资产。我使用webpack为了使用需要

我有我的路线内的应用程序。js:

var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;
var ReactDOM = require('react-dom');
var browserHistory = require('react-router').browserHistory;

ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={Welcome}>
            <Route path="hello" component={Hello}/>
            <Route path="welcome" component={Welcome}/>
            <Route path="about" component={About}/>
            <Route path="*" component={NoMatch}/>
        </Route>
    </Router>
), document.getElementById('root'));

另外es6。jsx:

var Hello = React.createClass({
    render: function () {
        return (
            <div>
                <h3>Hello component</h3>
                <a href="#about">About</a>
            </div>
        );
    }
});

var Welcome = React.createClass({
    render: function () {
        return (
            <div>
                <h3>Welcome component</h3>
                <a href="#hello">Hello</a>
            </div>
        );
    }
});

var About = React.createClass({
    render: function () {
        return (
            <div>
                <h3>About component</h3>
                <a href="#welcome">Welcome</a>
            </div>
        );
    }
});

var NoMatch = React.createClass({
    render: function () {
        return (
            <h3>No Match</h3>
        );
    }
});

当我访问controller_name/index时，默认情况下，它会呈现带有“#hello”链接的“欢迎组件”文本，但单击时，它不会执行任何操作。它仍然在说“欢迎组件”

我做错了什么？

Answer 1

您只呈现欢迎内容，而不是任何子组件。我希望这能解决它。

var Welcome = React.createClass({
    render: function () {
       if(this.props.children){
            return this.props.children
        }else{
          return (
             <div>
                <h3>Welcome component</h3>
                <a href="#hello">Hello</a>
             </div>
           );
       }
    }
});