Реагировать маршрутизатор не делает компонент

Question

Мы используем react-router так:

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> 
     ) 
    } 
}); 

После включения react-router, что раньше было просто localhost:8000 начал смотреть, как localhost:8000/#/?_k=wulhmi. Не знаю, откуда взялись эти дополнительные параметры.

Во всяком случае, при попытке доступа localhost:8000/#/p/XYZ страница продолжает возвращаться к /. Любая помощь приветствуется.

Answer 1

Причина этого в том, что вы не предоставляете своим детям маршруты (маршруты). Выезд the react router docs.

Если добавить this.props.children к вашему AnyPic компонент все будет работать:

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

Как @robertklep отметил в комментарии, «лишние» вещи в URL добавляется как маршрутизатор использует Hash История по по умолчанию, вы, вероятно, захотите использовать BrowserHistory, чтобы сделать это, что вам нужно установить history module: npm install history См. документы here.