在动态路由的情况下反应路由器 4 404 路径答案

【问题标题】：react router 4 404 path in case of dynamic routes在动态路由的情况下反应路由器 4 404 路径
【发布时间】：2017-12-11 15:16:25
【问题描述】：

我正在使用最新的 React Router ( 4 ) 版本。我的路线有一个动态配置，就像教程中描述的那样。它工作正常，但是当我尝试添加 404 路径（就像在教程中一样）时，它会在加载任何具有正确路径的普通组件之前开始显示这个 404 页面。

如果路径不存在，404 路由可以正常工作。

如果移动到允许的路线配置）

首先显示 404 组件（我不知道为什么）第二 - 显示正常组件，404 组件已消失。

有没有人知道如何解决这个问题？感谢您提供任何信息！

这是我的路线配置。

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

【问题讨论】：

你是怎么做这个lazyRoute()的？

标签： javascript reactjs react-router http-status-code-404

【解决方案1】：

我已经找到了解决这个问题的方法。

在 react-router 文档中我们可以看到：

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

这意味着我们应该将 Switch 组件添加到我们的路由方案中，以仅显示第一个匹配的组件。我有 Switch，但在错误的地方。它应该包装生成的路由，但在我的情况下它是“内部包装器”。

在这些更改之后，我的配置如下所示：

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

希望它可以帮助某人。最好的祝福。维利丹

【讨论】：