प्रतिक्रिया-राउटर लिंक काम नहीं करता

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.js

को withRouter जोड़ा

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

मैं अभी भी समझ में नहीं आता कि क्या हुआ यह काम कर रहा डाल करने में सक्षम था। शायद यह रेडक्स से संबंधित है या कुछ विवरण है जो मुझे याद आ रही है।