Environment: webpack4 react and others are the latest dependencies!
import React from "react";
import {
BrowserRouter,
Route,
Link,
Switch,
HashRouter
} from "react-router-dom"
import Loadable from "react-loadable";
import Loading from "./loading.jsx";
//
import App from "../app.jsx";
//
//demos
import Demo from "../pages/demos/demo.jsx";
//pages
import Search from "../store/container/searchContainer";
import ShopDetail from "../store/container/shopDetailContainer";
import AllShopList from "../pages/allShopList/allShopList.jsx";
import BrandDetail from "../pages/brandDetail/brandDetail.jsx";
import CouponDetail from "../store/container/couponDetailContainer";
import MyCollection from "../pages/myCollection/myCollection.jsx";
//
const SearchLazy = Loadable({
loader: () => import("../store/container/searchContainer"),//
loading: () => Loading,
})
//
const routes = [
{path: "/", text: "search", component: SearchLazy}, //
//{path: "/", text: "search", component: Search },
{path: "/couponDetail", text: "couponDetail", component: CouponDetail},
{path: "/search", text: "search", component: Search },
{path: "/shopDetail", text: "shopDetail", component: ShopDetail},
{path: "/demo", text: "demo", component: Demo},
{path: "/allShopList", text: "allShopList", component: AllShopList},
{path: "/brandDetail", text: "brandDetail", component: BrandDetail},
{path: "/myCollection", text: "myCollection", component: MyCollection}
];
//@formatter:off
const AppRouter = () => (
<HashRouter>
<App>
{
routes.map((page, index) => page.component ?
<Route key={index} exact path={page.path} component={page.component}/> : "")
}
</App>
</HashRouter>
);
//@formatter:on
export default AppRouter;