リアクタ・ルータのリンクが動作しない

Question

リアクタは本当に悪いスタートです...基本的な動作はしません。反応-ルータは、私のリンクコンポーネントが約/するURLを更新しますが、私のページは、その後についてコンポーネントをレンダリングしていません2.0.0 ...

エントリポイントJS

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

ルート「については、」「アプリケーション」ルートの子であるので、あなたのアプリケーションコンポーネントにthis.props.childrenを追加するか必要があります。

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

したり、ルートを区切る：何らかの理由で

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

Answer 2

、<Link> Sは、以下の設定で私のために働いていませんでした。

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

ホームコンポーネントは、リンクを持っていましたが、アプリケーション上のリンクは、同じことをするだろう。クリックするたびにURLだけが変更されますが、ビューは同じままです。

私はまだ何が起こったのか理解していないApp.js

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

に withRouter を追加したときに作業し、それを置くことができました。たぶんそれはreduxに関連しているか、私は行方不明のいくつかの詳細があります。