webentwicklung-frage-antwort-db.com.de

Mehrere verschachtelte Routen in reag-router-dom v4

Ich brauche mehrere verschachtelte Routen in React-Router-Dom

Ich verwende v4 von "react-router-dom"

Ich habe meine

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

und ich brauche die Komponenten, um so zu rendern

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

Die Home-Komponente enthält eine Header-Komponente, die den Komponenten von Seite1, Seite2 und, Seite3 gemeinsam ist, in Login und About jedoch nicht vorhanden ist.

Mein js-Code liest sich so

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

Ich gehe davon aus, dass die Login-Komponente nur auf /login.__ angezeigt wird. Wenn ich/page1,/page2,/page3 anfrage, sollten sie die Home-Komponente bzw. den Inhalt dieser Seite enthalten.

Was ich stattdessen bekomme, ist die Login-Komponente, die gerendert wird, und darunter wird die Komponente von Page1 gerendert.

Ich bin mir ziemlich sicher, dass mir etwas sehr Triviales fehlt oder irgendwo ein dummer Fehler gemacht wird, und ich würde mich über jede Hilfe freuen, die ich bekommen konnte. Ich bin seit zwei Tagen damit beschäftigt.

24
Aditya Talpade

Verwenden Sie die URL/Pfad-Übereinstimmung, die von den Requisiten this.props.match.path abgerufen wird, um den Pfad abzurufen, der auf eine Komponente festgelegt ist.

Definieren Sie Ihre Hauptrouten wie folgt

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

Definieren Sie dann in Home Component Ihre Routen 

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

Die definierten Routen sind wie folgt

  • /Anmeldung
  • /Zuhause
  • / home/eins
  • / home/zwei
  • /Über
  • /usw

Wenn Sie Routen in HomePageOne wie / home/one/a und / home/one/b weiter verschachteln möchten, können Sie den gleichen Ansatz verwenden. 

Hinweis-1: Wenn Sie keine weitere Verschachtelung wünschen, legen Sie die Route einfach mit der Eigenschaft exact fest.

EDIT (15. Mai 2017)

Anfangs habe ich props.match.url verwendet und nun in props.match.path geändert.

Wir können props.match.path anstelle von props.match.url im Pfad von Route verwenden. Wenn Sie Pfadparameter in Routen der obersten Ebene verwenden, können Sie sie über props.match.params auf inneren (verschachtelten) Routen abrufen.

Wenn Sie keine Pfadparameter angeben, reicht props.match.url aus

35
Ram Babu S

Verwenden Sie die Switch-Komponente in Router 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>
    )
  }
}

Ich denke, dieser Code zeigt die Grundidee der Verwendung von Komponenten.

3
Igor Stecyura

Diese Woche hatte ich das gleiche Problem. Ich denke, das Projekt vergeht in Zeiten der Verwirrung, da alle Dokumentationen, Beispiele und Videos für die Vorgängerversionen sind und die Dokumente für die Version 4 verwirrend sind
So erledige ich die Dinge, lass mich wissen, ob dies hilft

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

Verschieben Sie alle Childs-Routen zur übergeordneten Komponente, und erweitern Sie die Route wie folgt. 
<Route path={`${match.url}/keyword`} component={Topic}/> 
auch überprüfen reaktortraining

1
Umair Ahmed

Verwenden Sie wie folgt:

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

Mehr anzeigen @ GitHub einschalten

0
Mushfiq