/ react

React | Rutas anidadas

El handler de nuestra aplicación usualmente tiene algo similar a lo siguiente:

import React, { Component } from 'react'
import {
    BrowserRouter as Router,
    Route,
    Switch } from 'react-router-dom'

import MyInnerComponent from './myinnercomponent'

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route
            path="/internal/:component"
            component={MyInnerComponent} />
          <Route
            component={NotFound} />
        </Switch>
      </Router>
    )
  }
}

export default App

Ahora en el componente MyInnerComponent podemos declarar más rutas, las cuales, internamente se ejecutarán una vez que entremos al path superior

import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import ProductManagementApp from './applications/productmanagementapp'

class MyInnerComponent extends Component {
  render () {
    return <div>
      <div className="page">
        <Route
          path="/internal/pms"
          component={ProductManagementApp} />
        <Route
          path="/internal/cms"
          component={ComponentManagementApp} />
      </div>
    </div>
  }
}

Entonces, cada app podría ser redireccionada desde un entry point abstracto a nivel alto, pero específico a desde tu componente interno, dando la posibilidad de desarrollar distintas aplicaciones en paralelo e integrarlas fácilmente