web-dev-qa-db-fra.com

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

J'ai besoin de plusieurs routes imbriquées dans react-router-dom

J'utilise v4 de react-router-dom

J'ai mon

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

et j'ai besoin des composants pour rendre comme si

--- Login
--- Home
    --- Page 1
    --- Page 2
    --- Page 3
--- About
--- etc

Le composant Accueil contient un composant En-tête commun aux composants Page1, Page2 et Page3, mais qui n'est pas présent dans Login et À propos de.

Mon code js se lit comme tel

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

Je m'attends à ce que le composant Login n'apparaisse que sur /loginLorsque je demande pour/page1,/page2,/page3, ils doivent contenir respectivement le composant Home et le contenu de cette page.

Ce que j'obtiens à la place, c'est le composant Login qui est rendu et, en dessous, le composant Page1 qui est rendu.

Je suis presque sûr que je manque quelque chose de très trivial ou de faire une erreur vraiment stupide quelque part et j'apprécierais toute l'aide que je pourrais obtenir. Je suis coincé avec ça depuis deux jours.

javascriptreactjsreact-routerreact-router-dom
24
Aditya Talpade

Utilisez la correspondance url/chemin obtenue à l'aide des accessoires this.props.match.path pour obtenir le chemin d'accès défini pour 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 dans le composant Home, définissez vos 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 itinéraires définis sont comme ci-dessous

  • /s'identifier
  • /maison
  • / home/one
  • / home/deux
  • /sur
  • /etc

Si vous souhaitez imbriquer des itinéraires dans HomePageOne tels que / home/one/a et / home/one/b, vous pouvez procéder de la même manière. 

Remarque 1: si vous ne voulez pas d'imbrication supplémentaire, définissez simplement l'itinéraire avec prop exact.

EDIT (15 mai 2017)

Au départ, j'ai utilisé props.match.url et maintenant je l'ai changé en props.match.path.

Nous pouvons utiliser props.match.path au lieu de props.match.url dans le chemin de Route. Ainsi, si vous utilisez des paramètres de chemin dans les routes de niveau supérieur, vous pouvez l'obtenir dans des routes internes (imbriquées) via props.match.params.

Si vous n'avez pas de paramètres de chemin, props.match.url suffit

35
Ram Babu S

Utiliser un composant commutateur 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 montre l'idée de base de l'utilisation de composant.

3
Igor Stecyura

Cette semaine, j’ai eu le même problème, je pense que le projet passe pour un temps de confusion car toute la documentation, les exemples et les vidéos sont pour les versions précédentes et les docs pour la version 4 sont confus
C’est comme cela que je fais les choses, laissez-moi savoir si cette

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;
2
Mirdrack

Déplacez tous les itinéraires enfant vers le composant parent et étendez l’itinéraire comme ci-dessous. 
<Route path={`${match.url}/keyword`} component={Topic}/> 
vérifier également réagir à la formation de routeur

1
Umair Ahmed

Utilisez 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 @ Activer GitHub

0
Mushfiq