De multiples Imbriquées les Routes dans réagissent-routeur-dom v4

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

Je suis en utilisant 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.

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.

vous devez ajouter exact accessoires sur la Route qui doit montrer sur la correspondance exacte. <Route path="/login" composant exact={Login} />
Essayé exacte avec /login, mais ma Maison composant s'affiche sous mon Login composant.
vérifier mon answare ainsi
Hey Aditya, êtes-vous capable de faire cette chose? Je voulais aussi faire exactement la même chose. Dans mon scénario, lorsque l'utilisateur ouvre le site web de réagir sera redirigé vers la de login si l'utilisateur n'est pas connecté. Après la connexion, ma page d'index s'affiche avec la barre de navigation et la barre de recherche. Maintenant, je voulais montrer au reste des pages dans le corps de cette page d'index, de sorte que toutes les pages partagent la même barre de navigation et la barre de recherche. J'apprécierais beaucoup si vous pouvez m'aider.
Pas de. Je l'ai donné. Est allé à réagir routeur v3. Mon travail était terriblement gênée de traiter avec la v4 qui n'était pas la peine l'effort supplémentaire.
Une fois que vous utilisez Réagir 16, vous aurez besoin de faire le changement de Réagir Routeur 4

InformationsquelleAutor Aditya Talpade | 2017-03-23

42

Utiliser l'url/chemin de match obtenues à partir des accessoires 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 dans 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 itinéraires définis sont comme ci-dessous
- /login
- /home
- /home/un
- /home/deux
- /sur
- /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.

MODIFIER (15 Mai 2017)

D'abord, 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 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
- Grande réponse. M'a sauvé beaucoup de temps. Merci!
InformationsquelleAutor Ram Babu S
7

Utilisation de l'Interrupteur composant 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.
- v4 de réagir-routeur-dom lance cet avertissement pour imbriqués les itinéraires Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored warning et ne rend pas les composants sous /page1, /page2, etc
- Oui, j'ai vu qu'il y avait un problème. J'ai changé le code, essayez de pls
- toute possibilité que vous pourriez partager le code de la Home composant?
- La maison de la composante ressemble à ceci : exportation par défaut de la classe à la Maison s'étend de la Composante { render() { return ( <div className="Accueil"> { cette.accessoires de jeu.les enfants } </div> ) } } je pense que ce code indique l'idée de base de l'utilisation d'un composant
InformationsquelleAutor Igor Stetsiura

Cette semaine, j'ai eu le même problème, je pense que le projet est en train de passer, pour un temps de confusion, parce que l'ensemble de la documentation, des exemples et des vidéos sont pour les versions précédentes et de la documentation pour la version 4 sont source de confusion

C'est la façon dont je reçois les choses faites, laissez-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;

Cette approche fonctionne, mais juste pour préciser pour ceux qui ne connaissent Réagir héritage: que composant racine aurez besoin d'une valeur de retour qui contient { accessoires.les enfants }.

InformationsquelleAutor Mirdrack

1

Déplacer tous les childs itinéraires de composant parent et l'extension de la route comme ci-dessous.

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

vérifiez également réagir routeur de formation

InformationsquelleAutor Umair Ahmed

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 d' @ Interrupteur sur GitHub

InformationsquelleAutor Mushfiq

Vous devez vous connecter pour publier un commentaire.