So the first thing we need to do is head over to our bootstrap.js file. We're going to need access to our components. So we don't want to call this app.js we want to call it home.js. So let's rename the file to home.js and then rename the component to Home with a capital H and we should be good there.

Let's go to bootstrap and let's important it on line 14, so import home from './components/home.

bootstrap.js

import Home from './components/home';

Okay, so all I did was change app.js to home.js and I called the component Home. Now the next thing we need to do is go to our bootstrap.js and import Home from home save that and define some routes.

So I'm going to add something to the react-router-dom import here. I'm going to say import switch route and instead of just rendering app in here, first off we don't even have to called app anymore. So let's get rid of this import from the app and second off we're not going to be able to display it called app because it's called home now.

So change that to Home and it should render in our browser as home.

bootstrap.js

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

import 'bootstrap/dist/css/bootstrap.css';
import './style/main.scss';

import Home from './components/home';

function main() {
  ReactDOM.render(
    <Provider store={createStoreeWithMiddleware(reducers)}>
      <BrowerRouter>
        <Home />
      </BrowerRouter>
    </Provider>
    , document.querySelector('.app-wrapper'));
}

document.addEventListener('DOMContentLoaded', main);

Now let's go back to our app and let's define some routes. So let's get rid of this Home and I'm just going to develop a switch here, I'm going to put a switch here. And in here I'm going to contain my routes, so I'm going to put route the path is equal to our home paths so our default path and exact, so I'll tell you why that if you don't remember, I'm going about component is equal to Home.

OK so now I'm going to close this off a bit differently. OK, now if we go here we're going to be brought to our home which is what we want. Now I needed to find another route for our results. So I'd say path is equal to /results.

Now we have a component is equal to and lets just put home for now because we haven't defined that component yet. So what we need to have happen is we need to navigate to the results page when we hit enter. If I hit enter nothing happens because we're in the same component. So let's go ahead and set up that component in the next guide.

So lets say git status in the terminal and git add . and git commit -m and "setup app routes". Okay I'll catch the next guide we're we will develop the results component or at least the skeleton of it so we can navigate to it when we hit /results on our router.

Resources

bootstrap.js

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

import 'bootstrap/dist/css/bootstrap.css';
import './style/main.scss';

import Home from './components/home';

function main() {
  ReactDOM.render(
    <Provider store={createStoreeWithMiddleware(reducers)}>
      <BrowerRouter>
        <Switch>
          <Route path='/' component={Home}/>
          <Route path='/results' componet={Home}/>
        </Switch>
      </BrowerRouter>
    </Provider>
    , document.querySelector('.app-wrapper'));
}

document.addEventListener('DOMContentLoaded', main);

Resources

Source code