首页 文章

react-router - 没有在散列更改时呈现的组件

提问于
浏览 次
0

我在资产中使用Rails with react gem和react-router.js . 我正在使用webpack以使用require

我在app.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'));

other.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' 链接的 'Welcome component' 文本，但是当单击时，它不会执行任何操作 . 它还在说 'welcome component'

我做错了什么？

ruby-on-rails reactjs react-router

1 回答

  • 0

    您只渲染欢迎内容而不是任何子组件 . 我希望这会解决它 .

    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>
           );
       }
    }
});
    回复于

相关问题