Comment emboîter les routes dans le routeur React v4?

Je l'ai adapté des docs, semblent fonctionner jusqu'à présent. Il manque probablement quelque chose d'évident, et oui ce n'est pas le chemin v4 mais nous avons besoin de toutes les routes définies en 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>

Vous êtes d'applications alot composant est chargé de rendre les Clients. Pour que les clients soient appelés, vous devez rendre les enfants D'AppBar. Tout ce qui est directement imbriqué sous AppBar est un enfant D'AppBar.

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 "/". AppBar et les clients rendront lorsque vous visitez "/ clients".

si quelqu'un veut avoir des routes imbriquées sans taper le préfixe de route wrapper, j'ai créé quelque chose comme ça 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 routes 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>
);

pour les routes emboîtées il y a un moyen très simple que j'utilise.

exemple routeur principal est be comme cela

<Router history={history}>
  <Switch >
    <Route path="/" component={Home}></Route>
  </Switch>
</Router>

à l'Intérieur de la Maison à l'aide de gamme Imbriquée:

<div className="App">
  <Navbar title="Home" links = { NavbarLinks }/>
  {this.renderContentPage()}
</div>

renderContentPage vérifiera L'URL et affichera la route imbriquée.

<Route exact path="/" component={Page1}></Route>
<Route exact path="/page1" component={Page1}></Route>
<Route exact path='/page2' component={Page2} />

donc inside Home component page1 et page2 components rendus.