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

Question

我正在使用最新的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 }; 

Answer 1

我找到了解决此问题的解决方案。

在反应路由器的文档，我们可以看到：

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

它意味着我们应该添加开关组件到我们的路线方案，只显示第一个匹配的组件。我有开关，但在错误的地方。它应该包装生成的路线，但在我的情况下，它是“内部包装”。

这些更改后我的配置是这样的：

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

希望它可以帮助别人。 此致敬礼。 Velidan