Comment imbriquer des routes dans React Router v4?

Est-il possible d'imbriquer des itinéraires de Réagir Routeur v4?

Cela fonctionne:

  <Router basename='/app'>
    <main>
      <Route path='/' component={AppBar} />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>

Ce n'est pas:

  <Router basename='/app'>
    <Route path='/' component={AppBar}>
      <Route path='/customers' component={Customers} />
    </Route>
  </Router>

Clients Composant:

import React, { Component, PropTypes } from 'react'
import styled from 'styled-components'

export default class Customers extends Component {
  render () {
    return (
      <Container>
        <h1>Customers</h1>
      </Container>
    )
  }
}

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

source d'informationauteur Raphael Rafatpanah

  1. 26

    Meilleur modèle que j'ai trouvé jusqu'à présent. 

    //main app
<div>
    //not setting a path prop, makes this always render
    <Route component={AppShell}/>
    <Switch>
        <Route exact path="/" component={Login}/>
        <Route path="/dashboard" component={AsyncDashboard(userAgent)}/>
        <Route component={NoMatch}/>
    </Switch>
</div>

    Je peux juste garder cette imbrication à l'intérieur d'un composant et tout fonctionne de nice, y compris hmr(Si vous utilisez webpack, n'oubliez pas de positionner output.publicPath à "/")

    //dashboard component
<div>
    //the same way as before, not setting a path prop
    //makes it render on every /dashboard/** request 
    <Route component={DashboardTAB}/>
    <Switch>
        //longer path (with same root) than others first
        <Route path="/dashboard/graphs/longerpath" component={GraphForm}/>
        <Route path="/dashboard/graphs" component={Graphs}/>
        <Route path="/dashboard/workers" component={List}/>
        <Route path="/dashboard/insert" component={InsertComponent}/>
    </Switch>
</div>
  2. 6

    J'ai adapté cette de la documentation, semblent si loin. Sans doute manque quelque chose d'évident, et oui ce n'est pas la v4 façon, mais nous avons besoin de tous les itinéraires définis dans un seul endroit.

    function RouteNest(props){ return (
  <Route exact={props.exact} path={props.path} render={ p => <props.component {...p} children={props.children}/> } />
)}

export const MainRoutes = props => 

<div className='content layout'>

  <Route exact path="/" component={Landing}/>
  <Route  path={'/contact'} component={Contact}/>

  <RouteNest  path={'/thing'} component={CompoWithSub}>
    <RouteNest  path={'/thing/suba'} component={SubComponentA}/>
    <RouteNest  path={'/thing/subb'} component={SubComponentB}/>
  </RouteNest>


</div>

export const CompoWithSub = props => <div>{props.children)</div>
  3. 1

    Vous êtes à la barre d'applications composant est chargé de rendre les Clients. Pour les clients d'être appelé, vous devez rendre les enfants de la barre d'applications. Tout ce qui est directement imbriquées sous la barre d'accès est un enfant de la barre d'applications. 

    import React from 'react';

const AppBar = ({ children }) => (
  <div>
    <header>
       <h1> stuff </h1>
    </header>
    {children}
  </div>
);

export default AppBar

    Veuillez noter que seules les applications alot sera rendu lorsque vous visitez "/". Barre d'applications et de Clients sera rendu lorsque vous visitez des "clients".

  4. 1

    Si quelqu'un veut avoir imbriqués les routes sans avoir à taper le préfixe de wrapper de route, j'ai créé quelque chose comme cela dans TSX:

    Importations:

    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 {}

    NestedRoute et NestedRoutes wrapper:

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


const NestedRoute: React.SFC<INestedRoute> = (props: INestedRoute) => {
    return <Route path={`${props.nested}${props.path}`} component={props.component} />;
};

    Et les itinéraires avec wrapper:

    const MultiLanguage: React.SFC<RouteComponentProps<any>> = (props: RouteComponentProps<any>) => {
    return (
        <NestedRoutes nested={props.match.path} >
            <NestedRoute path="/test" component={Login} />
            <NestedRoute path="/no-match" component={NoMatch} />
        </NestedRoutes>
    );
};


export default (
    <Switch>
        <Route path="/:language" component={MultiLanguage}/>
        <Route exact={true} path="/" component={Index} />
        <Route path="/login" component={Login} />
        <Route component={NoMatch} />
    </Switch>
);