Liên kết phản ứng-bộ định tuyến không hoạt động

Question

Bộ phản ứng-bộ định tuyến có khởi đầu thực sự tồi tệ ... Có vẻ như cơ bản không hoạt động. Sử dụng phản ứng-router 2.0.0 thành phần liên kết của tôi cập nhật các URL được/về, nhưng trang của tôi không làm cho Về thành phần sau đó ...

Entry điểm 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

Kể từ khi 'về' con đường là con của con đường 'App, bạn cần phải thể thêm this.props.children đến thành phần ứng dụng của bạn:

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

hoặc tách tuyến đường của bạn:

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

Answer 2

Đối với một số lý do, <Link> s không được làm việc cho tôi với các cấu hình dưới đây.

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

Thành phần chủ có Link, nhưng Liên kết trên App sẽ làm như vậy. Mỗi khi tôi nhấp vào nó, nó sẽ chỉ thay đổi url, nhưng các quan điểm sẽ giữ nguyên.

tôi đã có thể đặt nó làm việc khi tôi thêm withRouter đến App.js

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

Tôi vẫn không hiểu chuyện gì xảy ra. Có lẽ nó liên quan với redux hoặc có một số chi tiết tôi đang mất tích.