react-router - 沒有組件在哈希變化上呈現

Question

我正在使用Rails與react gem和react-router.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：我是爲了使用需要

我有我的內app.js航線使用的WebPack

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 /指數它默認呈現'歡迎組件'文本鏈接到'#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> 
      ); 
     } 
    } 
});