React routing with example

In this tutorial we will learn React routing with example, React Routing is a small task but very important for the single page application. By using React routing you will be able to switch page and after refresh the page will still same. So let’s get started react routing with example

Create React App

Before get started React Routing in your React Application, We need a React Project. If you don’t know how to create a new project. Follow this tutorial.

Step 1 – Install a React Router

Run the below command will install the react-router-dom package

npm install --save react-router-dom

Step 2 – Create Components

Next, We will create three components, you can create more as per your requirement. To create components open App.js file and put the below code

import React from 'react';

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

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

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}
export default About;

Step 3 – Import Router

Import the router in the index.js file

import { Route, Link, BrowserRouter as Router } from 'react-router-dom';

Step 4 – Add Route

Open index.js file and add the route and navigation

ReactDOM.render((
    <Router>
    	<ul>
    		<li><Link to={'/'} >Home</Link></li>
    		<li><Link to={'/about'} >About</Link></li>
    	</ul>
		<Route exact path="/" component={Home} />
		<Route exact path="/about" component={About} />	
	</Router>
), document.getElementById('root'));

We are using Link insted of a tag

Here we have added exact prop. What is exact prop? Why we use this? So here is your answer, “/” slash is same in both path, So it renders both components to stop this behavior we use the exact prop.

After above changes our index.js file will looks like this

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render((
    <Router>
	    <ul>
	        <li><Link to={'/'} >Home</Link></li>
	        <li><Link to={'/about'} >About</Link></li>
	    </ul>
	    <Route exact path="/" component={Home} />
	    <Route exact path="/about" component={About} />	
	</Router>
), document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

404 page

Redirect unmatch request to notfound page. You need to import the component, then you can remove the path attribute altogether.

Example:

import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render((
    <Router>
	    <ul>
	        <li><Link to={'/app/'} >Home</Link></li>
	        <li><Link to={'/app/about'} >About</Link></li>
	    </ul>
	    <Switch>
	    	<Route exact path="/app/" component={Home} />
	    	<Route exact path="/app/about" component={About} />	
	    	<Route component={NoMatchComponent} />
	    </Switch>
	</Router>
), document.getElementById('root'));

Running the App

Run application using npm start. Congrats!! See, it was easy.

Preview

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *