react router 4 404 path in case of dynamic routes

Question

Je travaille avec la dernière version de React Router ( 4 ). J'ai une configuration dynamique pour mes routes, comme décrit dans le tutoriel. Cela fonctionne bien mais lorsque j'ai essayé d'ajouter le chemin 404 (comme dans le tutoriel), il commence à afficher cette page 404 juste avant de charger n'importe quel composant normal avec le chemin correct.

En cas de chemin inexistant, l'itinéraire 404 fonctionne correctement.

En cas de passage à une configuration de route autorisée)

Premièrement - le composant 404 s'est affiché (je ne sais pas pourquoi) Deuxièmement - le composant normal s'est affiché et le composant 404 a disparu.

Quelqu'un a-t-il des informations sur la manière dont ce problème peut être résolu ? Merci pour toute information !

Voici ma configuration de l'itinéraire.

import React from "react";
import { Route, Switch } from "react-router-dom";
import { Config } from "shared/services";
import lazyRoute from "./lazyRoute";

const navScheme = Config.navigationScheme;

const COMPLEX_ROUTES = route => {
    console.log("routesss ->> ", route);
    return (
        <Switch >
            <Route path={route.path} exact={!!route.exact} render={props => (
                // pass the sub-routes down to keep nesting
                <route.component {...props} routes={route.routes}/>
            )}/>
        </Switch>
    );
};

const generateRoutes = routes => routes.map((route, i) => (
    <COMPLEX_ROUTES key={i} {...route}/>
));

const PLATFORM_CHILD_ROUTES = [
    {
        path : navScheme.platform,
        component : lazyRoute(() => import("../../modules/home/Home.module")),
        exact : true
    }
];

const ROUTES = [
    {
        path : navScheme.root,
        component : lazyRoute(() => import("../../modules/landing-page/LandingPage.module")),
        exact : true
    },

    {
        path : navScheme.platform,
        component : lazyRoute(() => import("../components/Platform")),
        routes : PLATFORM_CHILD_ROUTES
    },

    {
        path : "*",
        component : lazyRoute(() => import("../../modules/errors/Error404.module"))
    },

];

export { generateRoutes, ROUTES };

Answer 1

J'ai trouvé la solution à ce problème.

Dans la documentation react-router, nous pouvons voir cela :

A <Switch> renders the first child <Route> that matches. A <Route> with no path always matches.

Cela signifie que nous devrions ajouter le composant Switch dans notre itinéraire pour n'afficher que le PREMIER composant correspondant. J'ai ajouté l'interrupteur, mais au mauvais endroit. Il devrait envelopper les routes générées, mais dans mon cas, il s'agissait d'une "enveloppe interne".

Après ces changements, ma configuration ressemble à ceci :

import React from "react";
import { Route, Switch } from "react-router-dom";
import { Config } from "shared/services";
import lazyRoute from "./lazyRoute";

const navScheme = Config.navigationScheme;

const COMPLEX_ROUTES = route => {
    return (
            <Route path={route.path} exact={!!route.exact} render={props => (
                // pass the sub-routes down to keep nesting
                <route.component {...props} routes={route.routes}/>
            )}/>
    );
};

const generateRoutes = routes => {
    return (
        <Switch>
            {
                routes.map((route, i) => (
                    <COMPLEX_ROUTES key={i} {...route}/>
                ))
            }
        </Switch>
    );
};

const PLATFORM_CHILD_ROUTES = [
    {
        path : navScheme.platform,
        component : lazyRoute(() => import("../../modules/home/Home.module")),
        exact : true
    }
];

const ROUTES = [
    {
        path : navScheme.root,
        component : lazyRoute(() => import("../../modules/landing-page/LandingPage.module")),
        exact : true
    },

    {
        path : navScheme.platform,
        component : lazyRoute(() => import("../components/Platform")),
        routes : PLATFORM_CHILD_ROUTES
    },

    {
        path : "*",
        component : lazyRoute(() => import("../../modules/errors/Error404.module"))
    },

];

export { generateRoutes, ROUTES };

J'espère que cela aidera quelqu'un. Je vous prie d'agréer, Madame, Monsieur, l'expression de mes salutations distinguées. Velidan