# Routing

Is the process of resource navigation in a web app. This is how your app determines what to do with a client request. For example:

```javascript
app.get('/', function (req, res) { res.send('Hello World!'); })
```

When an HTTP GET request is made to the homepage of this web app, it returns "Hello World!".

# React router

A tool that allows you to handle routes in a web app, using *dynamic routing*. Dynamic routing takes place as the app is rendering on your machine, unlike the old routing architecture where the routing is handled in a configuration outside of a running app. React router implements a component-based approach to routing. It provides different routing components according to the needs of the application and platform. The following illustration shows how react router's dynamic routing works as compared to traditional static routing:


## React router in action

Here is a really simple single page app (SPA) that implements routing using React Router.

import React from 'react';
import { Home } from './views/Home';
import { About } from './views/About';
import { NavBar } from './components/NavBar';
import { Route, Switch, Redirect } from 'react-router-dom';

export const Routes = () => {
  return (
    <div>
      <NavBar />
      <Switch>
        <Route exact path="/Home" component={Home} />
        <Route exact path="/">
          <Redirect to="/Home" />
        </Route>
        <Route exact path="/About" component={About} />
      </Switch>
    </div>
  );
};

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';
import { BrowserRouter as Router } from 'react-router-dom';
import { Routes } from './routes'; // where we are going to specify our routes

ReactDOM.render(
  <Router>
    <Routes />
  </Router>,
  document.getElementById('root')
);


import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <p>Hello, Hello!</p>
    );
  }
}


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

There is one component `NavBar` that appears on the top of the app and enables switching between different views namely, `Home` and `About`. The `router.js` file is where all the routes of the SPA can be defined.

In `routes.js`, first, the components, views, and required packages are *imported* *(Line 1-5)*. Then all those routes are defined that the SPA can take, keeping the `Home` component the default route *(Line 13-15)*. And then all the possible routes are simply added using the following template, between `<Switch>` tags:

```javascript
<Route exact path="/specifiedPath" component={componentName} />
```

The component (`componentName`) will be rendered when the `"/specifiedPath"` is visited on the web app.

Importing these routes from `routes.js` to `index.js` file, putting them inside a `<Router>` tag is all that is needed as the last step.

React Router can be installed using the npm cli utility:

```bash
> npm install react-router-dom
```

... and then can be imported and used inside the SPAs.

What is a React router?

Routing Is the process of resource navigation in a web app. This is how your app determines what to do with a client request. For example: app.get( / , function (req, res) { res.send( Hello World! ); })  When an HTTP GET request is made to the homepage of this web app, it returns “Hello World!”. React router A tool that allows you to handle routes in a web app, using dynamic routing. Dynamic routing takes place as the app is rendering on your machine, unlike the old routing architecture where the routing is handled in a configuration outside of a running app. React router implements a component-based approach to routing. It provides different routing components according to the needs of the application and platform. The following illustration shows how react router s dynamic routing works as compared to traditional static routing: 