反應路由器鏈接不起作用

Question

反應路由器是一個非常糟糕的開始...什麼似乎基本不起作用。使用反應路由器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>小號沒有工作對我來說與下面的配置。

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

的家庭成分有鏈接，但在App鏈接會做同樣的。每次我點擊它，它只會改變網址，但意見將保持不變。

我能夠把它的工作，當我加入withRouter到App.js

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

我還是不明白髮生了什麼。也許它與redux有關係，或者我缺少一些細節。