2017-07-07 291 views
1

我正在使用最新的React Router(4)版本。我有一個動態配置我的路線,就像它在教程中所述。它工作正常,但是當我嘗試添加404路徑時(就像在本教程中那樣),它會在加載具有正確路徑的任何普通組件之前,開始顯示此404頁面。在動態路由的情況下反應路由器4 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 }; 
+0

你如何做到這一點lazyRoute()? – Ventura

回答

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