routes.js + index.js

index.js

// File - src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';

// Import store and history 
import store, { history } from './store';

// common components
import Header from './common/containers/Header'
import Menus from './common/containers/Menus'
import Footer from './common/containers/Footer'

// routes
import routes from './routes';

// Render App
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div className="App">
        <Header />
        <Menus />
        <div className="wrap">
          {routes}
        </div>
        <Footer />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

routes.js

// File - src/routes.js

import React from 'react';
import { Route, Switch } from 'react-router';
 
// Module root components
import Home from './home';
import Catalog from './catalog';
import Product from './product';
import Archives from './archives';
import PageNotFound from './common/components/PageNotFound';

export default (
  <Switch>
    <Route exact path="/catalog" component={Catalog}/>
    <Route exact path="/product/:productId" component={Product}></Route>
    <Route exact path="/designers" component={Designers}/>
    <Route exact path="/articles" component={Archives}/>
    <Route exact path="/articles/category/:slug" component={Archives}/>
    <Route exact path="/" component={Home}/>
    <Route path="*" component={PageNotFound} />
  </Switch>
);