Il collegamento React-Router non funziona

Question

Il React-Router è partito in modo davvero brutto ... Ciò che sembra semplice non funziona. Utilizzando reagire-router 2.0.0 mia componente link aggiorna l'URL da/su, ma la mia pagina non rende il proposito di componente dopo che ...

punto js Entry

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Router = require('react-router').Router; 
var Route = require('react-router').Route; 
var hashHistory = require('react-router').hashHistory; 
var App = require('./components/App.react'); 
var About = require('./components/About'); 

ReactDOM.render(
    <Router history={hashHistory} > 
     <Route path="/" component={App}> 
      <Route path="about" component={About} /> 
     </Route> 
    </Router>, 
    document.getElementById('app') 
); 

App.js

'use strict'; 

var React = require('react'); 
var Link = require('react-router').Link; 
var Header = require('./Header'); 
var UserPanel = require('./UserPanel'); 
var ModelPanel = require('./ModelPanel.react'); 
var EventPanel = require('./event/EventPanel'); 
var VisPanel = require('./vis/VisPanel'); 
var LoginForm = require('./LoginForm'); 
var AppStore = require('../stores/AppStore'); 
var AppStates = require('../constants/AppStates'); 

var App = React.createClass({ 

    [... code omitted ...] 

    render: function() { 
    var viewStateUi = getViewStateUi(this.state.appState); 

    return (
     <div> 
     <Header /> 
     <Link to="/about">About</Link> 
     {viewStateUi} 
     </div> 
    ); 
    } 

}); 

Answer 1

Dal momento che il 'riguardo' itinerario è un bambino del percorso 'App', è necessario aggiungere this.props.children al componente App:

var App = React.createClass({ 

render: function() { 

    var viewStateUi = getViewStateUi(this.state.appState); 

    return (
     <div> 
     <Header /> 
     <Link href="/about">About</Link> 
     {viewStateUi} 
     {this.props.children} 
     </div> 
    ); 
    } 
}); 

o separare i percorsi:

ReactDOM.render(
    <Router history={hashHistory} > 
    <Route path="/" component={App} /> 
    <Route path="/about" component={About} /> 
    </Router>, 
    document.getElementById('app') 
); 

Answer 2

Per qualche ragione, i <Link> s non funzionavano per me con la configurazione di seguito.

// index.js

ReactDOM.render(
    <Provider store={store}> 
    <BrowserRouter > 
     <App /> 
    </BrowserRouter> 
    </Provider>, 
    document.getElementById('root') 
); 

// App.js

return (
     <div className="App"> 
     <Route exact={true} path="/:lang" component={Home} /> 
     <Route exact={true} path="/" render={() => <Redirect to={{ pathname: 'pt' }} />} /> 
     <Route path="/:lang/play" component={Play} />} /> 
     <Route path="/:lang/end" component={End} /> 
     </div > 
    ); 

Il componente di casa ha il Link, ma collegamenti su App avrebbe fatto lo stesso. Ogni volta che l'ho fatto clic, cambierebbe solo l'url, ma le visualizzazioni rimarrebbero le stesse.

sono stato in grado di mettere a lavorare quando ho aggiunto withRouter al App.js

export default withRouter(connect(mapStateToProps, { f, g })(App)); 

io ancora non capisco cosa sia successo. Forse è collegato a Redux o c'è qualche dettaglio che mi manca.