wake-up-neo.com

Wie verschachteln Sie Routen in React Router v4?

Gibt es eine Möglichkeit, Routen in React Router v4 zu verschachteln?

Das funktioniert:

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

Das tut nicht:

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

Kundenkomponente:

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;
`
17

Bestes Muster, das ich bisher gefunden habe. 

// 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>

Ich kann dies einfach weiter in einer Komponente verschachteln und alles funktioniert gut. Schön einschließlich hmr. (Wenn Sie Webpack verwenden, vergessen Sie nicht, output.publicPath auf "/" zu setzen.)

// 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>
29
CESCO

Ich habe dies aus den Dokumenten angepasst, scheint soweit zu funktionieren. Wahrscheinlich fehlt etwas offensichtliches, und ja, es ist nicht der v4-Weg, aber wir brauchen alle Routen, die an einem Ort definiert sind.

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>
7
soundyogi

Ihre AppBar-Komponente ist für das Rendern von Kunden verantwortlich. Damit Kunden angerufen werden können, müssen Sie die untergeordneten Elemente von AppBar darstellen. Alles, was direkt unter AppBar verschachtelt ist, ist ein Kind von AppBar. 

import React from 'react';

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

export default AppBar

Bitte beachten Sie, dass nur AppBar gerendert wird, wenn Sie "/" besuchen. AppBar und Kunden werden gerendert, wenn Sie "/ customers" besuchen.

1

Wenn jemand verschachtelte Routen haben möchte, ohne das Präfix der Wrapper-Route einzugeben, habe ich in TSX Folgendes erstellt:

Importe:

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';

Schnittstellen:

interface INestedRoutes {
    nested?: string;
}

interface INestedRoute extends RouteProps, INestedRoutes {}

NestedRoute- und 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} />;
};

Und Routen mit 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>
);
1
Marcin Sadowski

Für verschachtelte Routen gibt es einen sehr einfachen Weg, den ich benutze. 

Beispiel Hauptrouter ist so 

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

Innerhalb der Home-Komponente mit Nested Routing kann wie folgt aussehen: 

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

renderContentPage überprüft die URL und rendert die verschachtelte Route.

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

So werden die Komponenten der Home-Komponente page1 und page2 gerendert. 

0
Hadnazzar