React router nie renderowania komponentu

Question

Używamy react-router tak:

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

Po tym react-router, co kiedyś było tylko localhost:8000 zaczął wyglądać jak localhost:8000/#/?_k=wulhmi. Nie wiem skąd pochodzą te dodatkowe parametry.

W każdym razie podczas próby uzyskania dostępu do strony localhost:8000/#/p/XYZ strona wraca do numeru /. Każda pomoc byłaby bardzo cenna.

Answer 1

Powodem tego jest fakt, że nie renderujesz ścieżek (y) dzieci. Sprawdź the react router docs.

Jeśli dodać this.props.children do AnyPic składnika wszystko będzie działać:

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

Jak @robertklep podkreślono w komentarzu, „ekstra” rzeczą w adresie URL jest dodawana jako router wykorzystuje Hash Historia przez domyślnie, prawdopodobnie chcesz użyć BrowserHistory, aby to zrobić, musisz zainstalować history module: npm install history Zobacz dokumenty here.