CODEWITHSUNDEEP
javascriptreactjsbrowserreact-router
Anil_sg
Anil_sg

Reputation: 11

Extend the React Router of exist application on fly

Is there any way to extend react-router of one application which is already hosted on fly? I want to inject additional routes on the click of a link which allows me to inject the script or allows to include my javascript.

Eventually I am looking for two different react applications which has one build and deployment cycle, but interrelated to each other.

Ex. there is the abc.com in which on click of a link(i.e. abc.com/nepage) the entire page is getting reloaded with same content [i.e. say header footer] which is maintained by different team all to gather and they have there one build and deployment cycle.

I want the application to be with SPA even if we have different build and deployment process.

This was achieved using Backbone with help of Backbone.Router.extend, where on click of link the default router for the new page was overridden with all new set of routers and which use to full the supporting files from the path mentioned for the specific router's

Upvotes: 1

Views: 216

Answers (1)

Lucas Constantino Silva
Lucas Constantino Silva

Reputation: 981

With PlainRoutes, child routes can be loaded on-demand (when the user enters the route) and resolved asynchronously. Having that in mind, you can use Webpack chunks to split the code corresponding to theses routes in diferente files. Going even further, you can have multiple entrypoints on Webpack, making users load only the part of the application that affects the current page.

Sample app:

index.js: 

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, browserHistory } from 'react-router'

const App = ({ children }) => {
  <div>
    <nav>Your navigation header</nav>
    { children }
    <footer>Your app footer</footer>
  </div>
}

const HomePage = () => <p>Welcome!</p>

const routes = {
  path: '/',
  component: App,
  indexRoute: { component: HomePage },
  getChildRoutes (partialNextState, cb) {
    require.ensure([], (require) => {
      cb(null, [
        require('./routes/about'),
        require('./routes/blog'),
        require('./routes/contact'),
      ])
    })
  }
}

ReactDOM.render(
  <Router history={ browserHistory } routes={ routes } />,
  document.getElementById('container')
)

routes/about.js: 

import React from 'react'

const About = () => <p>About page</p>

export default {
  path: 'about',
  component: About
}

Other routes could be similar to the about route as shown above.

Upvotes: 3

Related Questions