Cómo anidar rutas en React Router v4?

¿Hay alguna forma de anidar rutas en React Router v4?

Esto funciona:

      

Esto no lo hace:

       

Componente de clientes:

 import React, { Component, PropTypes } from 'react' import styled from 'styled-components' export default class Customers extends Component { render () { return (  

Customers

) } } const Container = styled.section` height: 100%; padding: 15px; overflow: auto; `

El mejor patrón que he encontrado hasta ahora.

 // main app 
// not setting a path prop, makes this always render

Puedo seguir anidando esto dentro de un componente y todo funciona bien incluyendo hmr (Si usa el paquete web, no olvide establecer output.publicPath en "/" )

 // dashboard component 
// the same way as before, not setting a path prop // makes it render on every /dashboard/** request // longer path (with same root) than others first

Lo adapté de los documentos, parece que funciona hasta ahora. Probablemente falta algo obvio, y sí, no es el v4, pero necesitamos todas las rutas definidas en un solo lugar.

 function RouteNest(props){ return (   } /> )} export const MainRoutes = props => 
export const CompoWithSub = props =>
{props.children)

Tu componente AppBar está a cargo de procesar clientes. Para que los clientes sean llamados, debe procesar a los hijos de AppBar. Cualquier cosa anidada directamente en AppBar es hija de AppBar.

 import React from 'react'; const AppBar = ({ children }) => ( 

stuff

{children}
); export default AppBar

Tenga en cuenta que solo AppBar se procesará cuando visite “/”. AppBar y los Clientes procesarán cuando visites “/ customers”.

Si alguien quiere tener rutas anidadas sin escribir el prefijo de la ruta del contenedor, he creado algo así en TSX:

Importaciones:

 import * as React from 'react'; import { Route, RouteComponentProps, RouteProps, Switch } from 'react-router-dom'; import Index from 'views/index'; import Login from 'views/login'; import NoMatch from 'views/no-match'; 

Interfaces:

 interface INestedRoutes { nested?: string; } interface INestedRoute extends RouteProps, INestedRoutes {} 

Envoltura NestedRoute y NestedRoutes:

 class NestedRoutes extends React.Component { public render() { const childrenWithProps = React.Children.map(this.props.children, (child) => { return React.cloneElement( child as React.ReactElement, { nested: this.props.nested }, ); }) return childrenWithProps; } } const NestedRoute: React.SFC = (props: INestedRoute) => { return ; }; 

Y rutas con wrapper:

 const MultiLanguage: React.SFC> = (props: RouteComponentProps) => { return (     ); }; export default (       ); 

Para las rutas anidadas hay una manera muy simple que estoy usando.

Ejemplo de enrutador principal es ser así

      

El componente interior del hogar que utiliza el enrutamiento nested será como:

 
{this.renderContentPage()}

renderContentPage verificará la URL y representará la ruta anidada.

    

Por lo tanto, dentro de los componentes del Hogar página1 y página2 se representan los componentes.