React.js routing

Before React Router v4, the routing in react was static but after v4 update its dynamic. In single page applications, we have only one page index.html and different components which gets displayed based on routes.

In non spa web applications, server returns a page on request. To start with routing , first install the routing package −

npm install –save react-router-dom

Once we create the create the project with create-react-app, we will see there is only one html file and that is index.html and a single component named as App

Now, we will create two more components AboutUs.jsx and ContactUs.jsx

AboutUs.jsx

import React from 'react'
class AboutUs extends React.Component {
   render() {
      return <h1> About us </h1>
   }
}
export default AboutUs;

ContactUs.jsx

import React from 'react';
class ContactUs extends React.Component {
   render() {
      return <h1> Contact us </h1>
   }
}
export default ContactUs;

App.jsx

import React from 'react'
class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Home</h1>
         </div>
      )
   }
}
export default App;

We have now three components App, AboutUs, ContactUs.jsx

We will add the three components in index.jsx file.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
ReactDOM.render(<App />, document.getElementById('root'))

Route, Link, BrowserRouter are the three components which we will import from react-router –dom to implement the routing.

import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
ReactDOM.render(<App />, document.getElementById('root'));

For each route we will need to elements to specify the action.

• Path
• Component which handle that path

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
const routs = (
   < BrowserRouter >
      <div>
         <Route path="/" component={App} />
         <Route path="/aboutus" component={ AboutUs } />
         <Route path="/contactus" component={ ContactUs } />
      </div>
   </ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'))

Now, if save all files and run npm start to see the actions.

If we go to localhost:300/aboutus => we will see the about us page

Similarly localhost:300/contactus => display contact us page

But if you have noticed, the home component is also getting displayed on every other path as well. This is because there is ‘/’ in other paths as well which is not checked exactly.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
const routs = (
   <Router>
      <div>
         <Route exact path="/" component={App} />
         <Route path="/aboutus" component={Users} />
         <Route path="/contactus" component={Contact} />
      </div>
   </Router>
);
ReactDOM.render(routs, document.getElementById('root'));

We have added the exact keyword in path of App component.

Now, if we run the application and see abouts and contactus we will see only those components and home component will not be added into their view.