web-dev-qa-db-fra.com

Les routes imbriquées React-router-dom v4 ne fonctionnent pas

En référence à la question non résolue (en conclusion finale) 

Je reçois aussi le même problème.

https://reacttraining.com/react-router/web/guides/quick-start favorise react-router-dom

En outre, les utilisateurs préfèrent utiliser list down routes dans un fichier plutôt que dans des composants.

Quelque chose est référé: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

Quelque chose fonctionne (la plupart du temps): 

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

Quelque chose ne fonctionne pas: site.com/SomeGarbagePath affiche le <MainApp> je pense.
<Route path="*" component={PageNotFound}/> 

Mise à jour 

/ - 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)
reactjsreact-routerreact-router-v4react-router-dom
8
Masood

C'est une façon de faire ce que vous avez décrit (notez qu'il existe d'autres façons de gérer les présentations directement dans vos composants React). Afin de garder l'exemple simple, les autres composants (<Home>, <List> etc.) sont créés en tant que composants purement fonctionnels sans propriétés ni état, mais il serait trivial de placer chacun dans son propre fichier en tant que composant React approprié. L'exemple ci-dessous est terminé et s'exécutera.

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;

Cela fera ce qui suit, ce qui, espérons-le, est maintenant décrit dans votre question:

  1. /login n'a ni en-tête ni pied de page.
  2. /, /list et /settings ont tous l'en-tête et le pied de page.
  3. Tout itinéraire non trouvé affichera le composant PageNotFound, sans en-tête ni pied de page.
9
Todd Chaffee

Je serai honnête, je ne suis pas tout à fait sûr de ce que vous demandez. Je suppose que vous essayez d'obtenir votre exemple "Quelque chose ne fonctionne pas" au travail. 

Quelque chose comme ça,

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