web-dev-qa-db-de.com

Verschachtelte Routen von React-router-dom v4 funktionieren nicht

In Bezug auf die offene Frage (als abschließende Schlussfolgerung) 

Ich bekomme auch das gleiche Problem.

https://reacttraining.com/react-router/web/guides/quick-start fördert react-router-dom

Außerdem finden die Benutzer list down routes besser in einer Datei als in Komponenten.

Etwas bezogen: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

Etwas funktioniert (meistens):

import * as React from 'react'
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom'


export const Routes = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/login" component={Login}/>
        <MainApp path="/">
          <Route path="/list" component={List}/>
          <Route path="/settings" component={Settings}/>
        </MainApp>
        <Route path="*" component={PageNotFound}/>
      </Switch>
    </div>
  </Router>
)

Etwas funktioniert nicht: site.com/SomeGarbagePath zeigt den <MainApp>, denke ich.
<Route path="*" component={PageNotFound}/> 

Update

/ - Home - parent of all (almost)
/List - inside home
/Settings - inside home
/Login - standalone
/Users - inside home, For now just showing itself. It has further pages.
/User/123 - inside user with /:id
/User/staticUser - inside user with static route
/garbage - not a route defined (not working as expected)
8
Masood

Dies ist eine Möglichkeit, das, was Sie beschrieben haben, auszuführen (beachten Sie, dass es andere Möglichkeiten gibt, Layouts direkt in Ihren React-Komponenten zu behandeln). Um das Beispiel einfach zu halten, werden die anderen Komponenten (<Home>, <List> usw.) als rein funktionale Komponenten ohne Eigenschaften oder Status erstellt. Es wäre jedoch trivial, jede als eigene React-Komponente in eine eigene Datei zu schreiben. Das folgende Beispiel ist abgeschlossen und wird ausgeführt.

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

class App extends Component {
  render() {

    const Header = () => <h1>My header</h1>;
    const Footer = () => <h2>My footer</h2>;
    const Login = () => <p>Login Component</p>;    
    const Home = () => <p>Home Page</p>;
    const List = () => <p>List Page</p>;
    const Settings = () => <p>Settings Page</p>;
    const PageNotFound = () => <h1>Uh oh, not found!</h1>;

    const RouteWithLayout = ({ component, ...rest }) => {
      return (
        <div>
          <Header />
          <Route {...rest} render={ () => React.createElement(component) } />
          <Footer />
        </div>
      );
    };

    return (
      <Router>
        <div>
          <Switch>
            <Route exact path="/login" component={Login} />
            <RouteWithLayout exact path="/" component={Home} />
            <RouteWithLayout path="/list" component={List} />
            <RouteWithLayout path="/settings" component={Settings} />
            <Route path="*" component={PageNotFound} />
          </Switch>
        </div>
      </Router>    
    );
  }
}

export default App;

Dies wird folgendes tun, was hoffentlich jetzt in Ihrer Frage beschrieben wird:

  1. /login hat keine Kopf- oder Fußzeile.
  2. /, /list und /settings verfügen alle über Kopf- und Fußzeile.
  3. Jede Route, die nicht gefunden wird, zeigt die PageNotFound-Komponente ohne Kopf- oder Fußzeile an.
9
Todd Chaffee

Ich werde ehrlich sein, ich bin mir nicht ganz sicher, was Sie fragen. Ich gehe davon aus, dass Sie versuchen, Ihr Beispiel "Etwas funktioniert nicht" zum Laufen zu bringen. 

Etwas wie das,

import * as React from 'react'
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom'


export const Routes = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/login" component={Login}/>
        <MainApp path="/">
          <Switch>
            <Route path="/list" component={List}/>
            <Route path="/settings" component={Settings}/>
          </Switch>
        </MainApp>
        <Route component={PageNotFound} /> 
      </Switch>
    </div>
  </Router>
)
0
Tyler McGinnis