routs.js

const Rooot = props => {
  const requireSignIn = generateRequireSignInWrapper({
    redirectPathIfNotSignedIn: <Home />
  });
  const { sports, currentLocale , currentUser } = props;
  const routes = [
    {
      path: "/",
      exact: true,
      sidebar: () => <Sidebar sports={sports}></Sidebar>,
      header: () => (
        <Header currentUser={currentUser} currentLocale={currentLocale} />
      ),
      main: () => <Home></Home>
    },
    {
      path: "/sports/upcoming",
      exact: true,
      sidebar: () => <Sidebar sports={sports}></Sidebar>,
      header: () => (
        <Header currentUser={currentUser} currentLocale={currentLocale} />
      ),
      main: () => <Upcoming/>
    },
    {
      path: "/sports/inplay",
      exact: true,
      sidebar: () => <Sidebar sports={sports}></Sidebar>,
      header: () => (
        <Header currentUser={currentUser} currentLocale={currentLocale} />
      ),
      main: () => <Inplay/>
    },
    {
      path: "/sports/:sportId",
      exact: true,
      sidebar: () => <Sidebar sports={sports}></Sidebar>,
      header: () => (
        <Header currentUser={currentUser} currentLocale={currentLocale} />
      ),
      main: () => <Sports />
    },
    {
      path: "/sports/my-bets",
      exact: true,
      sidebar: () => <Sidebar sports={sports}></Sidebar>,
      header: () => (
        <Header currentUser={currentUser} currentLocale={currentLocale} />
      ),
      main: () => <MyBets />
    },
    {
      path: "/sports/event/:eventId",
      exact: true,
      sidebar: () => <Sidebar sports={sports}></Sidebar>,
      header: () => (
        <Header currentUser={currentUser} currentLocale={currentLocale} />
      ),
      main: () => <EventView />
    },
    {
      path: "/casino",
      exact: true,
      sidebar: () => <p>hi</p>,
      header: () => (
        <Header currentUser={currentUser} currentLocale={currentLocale} />
      ),
      main: () => <p>hi</p>
    }
    // ,
    // {
    //   path: "**",
    //   sidebar: () => <p>hi</p>,
    //   header: () => (
    //     <Header currentUser={currentUser} currentLocale={currentLocale} />
    //   ),
    //   main: () => <NotFound/>
    // }
  ];
  return (
    <Router>
      <Switch>
        <div className="wrapper3">
          <div className="wrapper4">
            <MobileHeader
              currentUser={currentUser}
              currentLocale={currentLocale}
            />
            <div className="renderframe layout-default">
              {routes.map((route, index) => (
                <Route
                  key={index}
                  path={route.path}
                  exact={route.exact}
                  component={route.sidebar}
                />
              ))}
              <div className="contentarea">
                {routes.map((route, index) => (
                  <Route
                    key={index}
                    path={route.path}
                    exact={route.exact}
                    component={route.header}
                  />
                ))}
                <div className="maincontent">
                  <CompactMenu />
                  {routes.map((route, index) => (
                    <Route
                      key={index}
                      path={route.path}
                      exact={route.exact}
                      component={route.main}
                    />
                  ))}
                </div>
              </div>
            </div>
          </div>
          <Footer locate={currentLocale} />
        </div>
      </Switch>
    </Router>
  );
};

export default Rooot;