React
रिएक्ट रूटिंग

उदाहरण Routes.js फ़ाइल, घटक में राउटर लिंक के उपयोग के बाद

अपने शीर्ष स्तर निर्देशिका में निम्नलिखित की तरह एक फ़ाइल रखें। यह परिभाषित करता है कि किन घटकों को किस पथ के लिए प्रस्तुत करना है

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import New from './containers/new-post';
import Show from './containers/show';

import Index from './containers/home';
import App from './components/app';

export default(
  <Route path="/" component={App}>
    <IndexRoute component={Index} />
    <Route path="posts/new" component={New} />
    <Route path="posts/:id" component={Show} />

  </Route>
);

अब आपके शीर्ष स्तर के index.js में, जो ऐप के लिए आपका प्रवेश बिंदु है, आपको केवल इस राउटर घटक को प्रस्तुत करना होगा:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
// import the routes component we created in routes.js
import routes from './routes';


// entry point
ReactDOM.render(
    <Router history={browserHistory} routes={routes} />
  , document.getElementById('main'));

अब आपके आवेदन में केवल <a> टैग के बजाय Link का उपयोग करने की बात है। लिंक का उपयोग करने से रिएक्ट राउटर के साथ रिऐक्ट राउटर रूट को निर्दिष्ट लिंक में बदलने के लिए संचार होगा, जो बदले में सही घटक को प्रस्तुत करेगा जैसा कि मार्गों में परिभाषित किया गया है। js

import React from 'react';
import { Link } from 'react-router';

export default function PostButton(props) {
  return (
    <Link to={`posts/${props.postId}`}>
      <div className="post-button" >
        {props.title}
        <span>{props.tags}</span>
      </div>
    </Link>
  );
}

प्रतिक्रिया रूटिंग Async

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import Index from './containers/home';
import App from './components/app';

//for single Component lazy load use this
const ContactComponent = () => {
  return {
      getComponent: (location, callback)=> {
        require.ensure([], require => {
          callback(null, require('./components/Contact')["default"]);
        }, 'Contact');
      }
    }
};

//for multiple componnets
 const groupedComponents = (pageName) => {
  return {
      getComponent: (location, callback)=> {
        require.ensure([], require => {
          switch(pageName){
            case 'about' :
                callback(null, require( "./components/about" )["default"]);
                    break ;
            case 'tos' :
                callback(null, require( "./components/tos" )["default"]);
                    break ;
          }
        }, "groupedComponents");
      }
    }
};
export default(
  <Route path="/" component={App}>
    <IndexRoute component={Index} />
    <Route path="/contact" {...ContactComponent()} />
    <Route path="/about" {...groupedComponents('about')} />
    <Route path="/tos" {...groupedComponents('tos')} />
  </Route>
);