Basically, I'm working on the [DataTurks](https://github.com/DataTurks/DataTurks) project but I've stumbled upon some problems linked to the frontend app named bazaar. I'm trying to create a new component and add a new route for it so I can access it. This is my code for my routes:

```
import React from 'react';
import {IndexRoute, Route} from 'react-router';
// import { isLoaded as isAuthLoaded, load as loadAuth } from 'redux/modules/auth';
import {
    App,
    Home,
    NotFound,

    TaggerLogin,
    TaggerSpace,
    TaggerCreate,
    TaggerImport,
    TaggerStats,
    TaggerExport,
    TaggerProjects,
    TaggerAdd,
    TaggerOveriew,
    TaggerVisualize,
    TaggerEdit,
    TaggerOrg,
    TaggerOrgProject,
    TaggerError,
    TaggerKeyBind,
    TaggerContributors,
    ConfirmMail
  } from 'containers';

export default (store) => {
  const requireLogin = (nextState, replace, cb) => {
    const { auth: { user }} = store.getState();
    if (!user) {
      // oops, not logged in, so can't be here!
      replace('/projects/login');
    }
    cb();
  };

  /**
   * Please keep routes in alphabetical order
   */
  return (
    <Route path="/" component={App}>
    <Route path="confirm" component={ConfirmMail}/> //THIS IS THE COMPONENT I'M TRYING TO ACCESS
      { /* Home (main) route */ }
      <IndexRoute component={Home}/>

      { /* Routes requiring login */ }
      <Route onEnter={requireLogin}>
        <Route path="projects/create" component={TaggerCreate}/>
        <Route path="projects/edit" component={TaggerEdit}/>
        <Route path="projects/:orgName/create" component={TaggerCreate}/>
        <Route path="projects/:orgName/import" component={TaggerImport}/>
        <Route path="projects/:orgName/:projectName/edit" component={TaggerEdit}/>
        <Route path="projects/:orgName/:projectName/keybind" component={TaggerKeyBind}/>
    </Route>

    { /* Dataturks tool */}
      <Route path="projects/login" component={TaggerLogin}/>
      <Route path="projects/import" component={TaggerImport}/>
      <Route path="projects/space" component={TaggerSpace}/>
      <Route path="projects/stats" component={TaggerStats}/>
      <Route path="projects/export" component={TaggerExport}/>
      <Route path="projects" component={TaggerProjects}/> 
      <Route path="projects/add" component={TaggerAdd}/>
      <Route path="projects/overview" component={TaggerOveriew}/>
      <Route path="projects/visualize" component={TaggerVisualize}/>

      <Route path="projects/errors" component={TaggerError}/>
      <Route path="projects/:orgName" component={TaggerOrg} />
      <Route path="projects/:orgName/:projectName" component={TaggerOrgProject} />
      <Route path="projects/:orgName/:projectName/space" component={TaggerSpace}/>
      <Route path="projects/:orgName/:projectName/export" component={TaggerExport}/>
      <Route path="projects/:orgName/:projectName/overview" component={TaggerOveriew}/>
      <Route path="projects/:orgName/:projectName/visualize" component={TaggerVisualize}/>
      <Route path="projects/:orgName/:projectName/contributors" component={TaggerContributors}/>

      { /* Catch all route */ }
      <Route path="*" component={NotFound} status={404} />
    </Route>
  );
};

```

What I'm trying to access is `ConfirmMail` component and route. The `ConfirmMail` component:

```
import React from 'react';

export default function ConfirmMail() {
  const styles = require('./ConfirmMail.scss');
  return (
    <div className="container">
        <div className={styles.loading + ' text-center'}>
          <span className="glyphicon glyphicon-repeat glyphicon-refresh-animate gi-3x">
          CONFIRMED
          </span>
        </div>
    </div>
  );
}

```

Also, the `client.js`:

```
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import createStore from './redux/create';
import ApiClient from './helpers/ApiClient';
import {Provider} from 'react-redux';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import { ReduxAsyncConnect } from 'redux-async-connect';
import useScroll from 'scroll-behavior/lib/useStandardScroll';
import {persistStore} from 'redux-persist';
import getRoutes from './routes';
import { Segment } from 'semantic-ui-react';

const client = new ApiClient();
const _browserHistory = useScroll(() => browserHistory)();
console.log('window data is', window._data);
const store = createStore(_browserHistory, client, window.__data);
const history = syncHistoryWithStore(_browserHistory, store);

class AppProvider extends React.Component {

  constructor() {
    super();
    this.state = { rehydrated: false };
  }

  componentWillMount() {
    persistStore(store, { blacklist: ['routing', 'dataturksReducer'] }, () => {
      this.setState({ rehydrated: true });
    });
  }

  render() {
    const component = (
              <Router render={(props) =>
                    <ReduxAsyncConnect {...props} helpers={{client}} filter={item => !item.deferred} />
                  } history={history}>
                {getRoutes(store)}
              </Router>
            );

    if (!this.state.rehydrated) {
      return (<div><Segment basic loading/></div>);
    } else if (this.state.rehydrated) {
      console.log('rehydrating ', component);
      return (
            <Provider store={store} key="provider">
              {component}
            </Provider>);
    }
  }
}

const dest = document.getElementById('content');

ReactDOM.render(
  <AppProvider />,
  dest
);
// const persistor = persistStore(store, {}, () => { this.rehydrated = true; });

```

This is the main [App.js](https://github.com/DataTurks/DataTurks/blob/master/bazaar/src/containers/App/App.js) component in this project.

So when I access localhost/confirm, I don't get a 404 not found page but I get an empty page. Earlier I've tried to `console.log` a few things but it didn't work either. I've been working on this my whole day and I didn't manage to make it work. Does someone know what am I doing wrong?