प्रतिक्रिया राउटर नेविगेशन

Question

काम नहीं करता है मैंने ES6 में प्रतिक्रिया राउटर के साथ एक प्रतिक्रिया जेएस परीक्षण अनुप्रयोग लागू किया है लेकिन यह काम नहीं कर रहा है। कोड स्निपेट नीचे मैं:

app.js 
------- 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Routes from './routes'; 

ReactDOM.render(Routes, document.getElementById('react-container')); 

routes.js 
--------- 

import React from 'react'; 
import { DefaultRoute, Link, Route, RouteHandler,Router } from 'react-router'; 
import Page1 from './page1'; 
import Home from './home'; 
import { IndexRoute } from 'react-router'; 

let routes = 
    <Router> 
    <Route path="/" component={Home}> 
     <Route path="page1" component={ Page1 }/> 
    </Route> 
    </Router> 

export default routes 

home.js 
------- 

import React, { Component } from 'react'; 
import Header from './components/header'; 

export default class Home extends Component { 
    constructor() { 
    super(); 
    } 

    render() { 
    return (
     <div> 
     <Header /> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

page1.js 
-------- 

import React, { Component } from 'react'; 

export default class Page1 extends Component { 
    constructor() { 
    super(); 
    } 

    render() { 
    return (
     <div> 
     <h1> Page 1 </h1> 
     </div> 
    ); 
    } 
} 

के लिए नेविगेट "/" और "/ पृष्ठ 1" एक पेज अकेला हैडर अनुभाग का संकेत में देश में लग रहे हैं। किसी भी मदद की सराहना की।

Answer 1

आपको constructor छोड़ना चाहिए जब यह कुछ भी नहीं कर रहा है। डिफ़ॉल्ट निर्माता है:

constructor(...args) { 
    super(...args); 
} 

तो निहित सहारा तर्क Home घटक में पारित नहीं हो रहे हैं।

Answer 2

ऐसा लगता है कि आप page1 को / पर नेविगेट करते समय दिखाने के लिए प्रस्तुत करना चाहते हैं? यदि हां, तो docs seem to indicate है कि आप एक IndexRoute की आवश्यकता होगी डिफ़ॉल्ट रूप से page1 को / मार्ग के लिए:

let routes = (
    <Router> 
    <Route path="/" component={Home}> 
     <IndexRoute component={Page1} /> 
    </Route> 
    </Router> 
); 

Answer 3

मैं इस परीक्षण करने के लिए सक्षम नहीं था, लेकिन मुझे लगता है कि एक इतिहास प्रदान किए बिना, प्रतिक्रिया रूटर यूआरएल स्थान पढ़ने में सक्षम नहीं होगा। तो यह केवल / पथ प्रस्तुत करने के लिए समझ में आता है।

<Router history={browserHistory}> 
... 
</Router> 

Answer 4

जवाब में से अधिकांश इन पर अलग-अलग स्पर्श करते हैं, लेकिन मैं आपको इस तरह की एक प्रतिक्रिया घटक में एक सूचकांक मार्ग, ब्राउज़र इतिहास गठबंधन, और अपने निर्यात चालू करने की आवश्यकता लगता है:

import { Router, browserHistory } from 'react-router' 

const Routes =() => { 
    return (
     <Router history={browserHistory}> 
      <Route path="/" component={Home}> 
       <IndexRoute component={Page1}/> 
      </Route> 
     </Router> 
    ) 
} 

export default Routes; 

यह चाहिए रिएक्ट राउटर के नवीनतम संस्करण (2.0.0-आरसी 5)