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

Question

J'ai besoin de multiples imbriquées les routes dans réagissent-routeur-dom

Je suis à l'aide de la v4 de réagir-routeur-dom

J'ai obtenu mon

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

et j'ai besoin de composants pour les rendre comme

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

La Maison composant contient un composant d'en-Tête qui est commun à la Page1, Page2, et, Page3 composants, mais n'est pas présent dans la Connexion et Sur les.

Mon code js lit comme

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

J'attends le composant Login pour afficher uniquement sur /login Quand je demande d' /page1, /page2, /page3, ils doivent contenir de la composante Accueil et la page de contenu, respectivement.

Ce que je reçois à la place, c'est le composant Login rendus, et en dessous Page1 du composant est rendu.

Je suis assez sûr que je suis absent quelque chose de très banal ou faire un vraiment stupide erreur quelque part, et vous serais reconnaissant de toute l'aide que je pouvais obtenir. J'ai été coincé avec ce pour les deux derniers jours.

Answer 1

Utiliser l'url/chemin de match obtenues à partir de props this.props.match.path pour obtenir le chemin d'accès est défini sur un composant.

Définir vos routes principales en tant que 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, en Home de Composants, de définir 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

• /login
• /home
• /home/one
• /home/deux
• /a-propos
• /etc

Si vous souhaitez imbriquer des itinéraires de plus en HomePageOne comme /home/un/un et /home/one/b, vous pouvez procéder de la même approche.

Note-1: Si vous ne voulez pas plus de nidification, il suffit de régler la route avec prop exact.

EDIT (15 Mai 2017)

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

On peut utiliser props.match.path au lieu de props.match.url dans l'Itinéraire du chemin de sorte que si vous utilisez le chemin d'accès params dans des itinéraires, vous pouvez l'obtenir en interne (imbriqué) routes via props.match.params.

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

Answer 2

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 montre l'idée de base d'utiliser un composant.

Answer 3

Cette semaine j'ai eu le même problème, je pense que le projet passe pour du 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 déroutants
Voilà comment je fais les choses, faites-moi savoir 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;
 

Answer 4

Déplacez tous les itinéraires enfants vers le composant parent et étendez l'itinéraire comme ci-dessous.
<Route path={`${match.url}/keyword`} component={Topic}/>
vérifiez également la formation du routeur React

Answer 5

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>
    );
  }
}
 

En savoir plus @ Activer GitHub