Plusieurs Routes imbriquées dans react-router-dom v4

utilisez la correspondance url/path obtenue à partir de props this.props.match.path pour obtenir le chemin qui est défini à un composant.

Définissez vos routes principales comme ci-dessous

<Router>
  <div>
    <Route exact path="/" component={DummyIndex} /> {/* Note-1 */}
    <Route path="/login" component={Login} />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/etc" component={Etc} />
  </div>
</Router>

Puis Home Composant, de définir les itinéraires

class Home extends Component {
  render() {
    return <div>
      <Route exact path={this.props.match.path} component={HomeDefault} />
      <Route path={`${this.props.match.path}/one`} component={HomePageOne} />
      <Route path={`${this.props.match.path}/two`} component={HomePageTwo} />
    </div>
  }
}

les routes définies sont comme ci-dessous

• / login
• / accueil
• /home/
• / accueil / deux
• /
• / etc

Si vous voulez pour imbriquer des itinéraires plus loin dans HomePageOne/home/un/un et / home/one / b, vous pouvez procéder de la même approche.

Note-1: si vous ne voulez pas d'autres nichages, il suffit de définir la route avec prop exact.

EDIT (15 Mai 2017)

initialement, j'ai utilisé props.match.url et maintenant, je l'ai changé pour props.match.path.

nous pouvons utiliser props.match.path au lieu de props.match.url dans le chemin du chemin de sorte que si vous utilisez Path params en haut les routes de niveau, vous pouvez l'obtenir dans les routes intérieures (imbriquées) via props.match.params.

Si vous n'en avez-vous pas de chemin params, props.match.url assez

Cette semaine j'ai eu le même problème, je pense que le projet passe pour du temps de confusion parce que toute la documentation, les exemples et les vidéos sont pour les versions précédentes et les docs pour la version 4 sont déroutants

C'est comme ça que je fais les choses, dites-moi si cette aide

import React, { Component } from 'react';

import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Root from './Root';
import Home from './Home';
import About from './About';

import './App.css';

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Root>
                       <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/home" component={Home} />
                            <Route path="/about" component={About} />
                        </Switch>
                    </Root>
                </div>
            </BrowserRouter>
        );
    }
}

export default App;

utiliser le composant Switch dans le routeur v4

<Router>
<Switch>
  <Route path='/login' component={Login} />
  <Route path='/about' component={About} />
  <Home>
    <Route component={({ match }) =>
      <div>
        <Route path='/page1' component={Page1} />
        <Route path='/page2' component={Page2} />
        <Route path='/page3' component={Page3} />
      </div>
    }/>
  </Home>
</Switch>

export default class Home extends Component {
render() {
    return (
      <div className="Home">
          { this.props.children }
      </div>
    )
  }
}

je pense que ce code indique l'idée de base de l'utilisation de composant.

déplacer toutes les routes childs vers la composante parent et prolonger la route comme ci-dessous.

<Route path={`${match.url}/keyword`} component={Topic}/>

vérifiez également réagir routeur formation

Utiliser Comme suit:

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Link to='/create'> Create </Link>
        <Link to='/ExpenseDashboard'> Expense Dashboard </Link>
        <Switch>
          <Route path='/ExpenseDashboard' component={ExpenseDashboard} />
          <Route path='/create' component={AddExpensePage} />
          <Route path='/Edit' component={EditPage} />
          <Route path='/Help' component={HelpPage} />
          <Route component={NoMatch} />
        </Switch>
      </BrowserRouter>
    );
  }
}

Voir plus @ Switch sur GitHub