Phản ứng router không render thành phần

Question

Chúng tôi đang sử dụng react-router như vậy:

ReactDOM.render(
    <Router> 
     <Route path="/" component={AnyPic}> 
      <Route path="p/:photoId" component={PhotoView} /> 
     </Route> 
    </Router>, 
    document.getElementsByClassName("container")[0] 
); 

var AnyPic = React.createClass({ 
    render: function() { 
     return (
      <p>Hello world</p> 
     ) 
    } 
}); 

var PhotoView = React.createClass({ 
    render: function(){ 
     return (
      <p>This is the photo view</p> 
     ) 
    } 
}); 

Sau bao gồm react-router, những gì đã từng là chỉ localhost:8000 bắt đầu trông như localhost:8000/#/?_k=wulhmi. Không chắc nơi các thông số bổ sung đó đến từ đâu.

Dù sao, khi cố gắng truy cập localhost:8000/#/p/XYZ trang tiếp tục quay lại /. Bất kì sự trợ giúp nào đều được đánh giá cao.

Answer 1

Lý do là vì bạn không hiển thị (các) con của bạn. Hãy xem the react router docs.

Nếu bạn thêm this.props.children-AnyPic thành phần tất cả mọi thứ bạn sẽ làm việc:

var AnyPic = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <p>Hello world</p> 
       {this.props.children} 
      </div> 
     ) 
    } 
}); 

Như @robertklep chỉ ra trong các bình luận, điều "thêm" trong URL đã được thêm vào như là Router sử dụng Hash Lịch sử bởi mặc định, bạn có thể muốn sử dụng BrowserHistory để làm điều đó bạn cần phải cài đặt history module: npm install history Xem tài liệu here.