Welcome Guest! (App Version 3.1)

websitnero logo name

Routing in React

Routing in React

In react, to do routing we have to use the library of react-router-dom.

To install the library, use the following command:

> npm install react-redux-dom

Steps for Routing

You need to follow these steps to implement routing in react:

  1. In App.js you need to import BrowserRouter, Switch, Route to be used for Routing. Along with these, import atleast 3 different components and 1 carrying link options. Use then the Router and Switch to set unique routes.
  2. In the component carrying links (here Navigation), import Link from react-router-dom and use this component to create hyperlinks (instead of anchor element).
  3. In the other components (here Home, About, Contact) which will be used as landing pages, enter some text so that they could be recognized when router lands on each of these pages.

Routing Example

Use the following code to understand a simple Routing Example:

App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Navigation from './components/navigation';
import Home from './components/home';
import About from './components/about';
import Contact from './components/contact';

function App() {
  return (
    <div className="App">
      <Router>
        <Navigation />
        <Switch>
          <Route path="/home" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/" component={Home} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

navigation.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Navigation extends Component {
  render(){
    return (
      <p>
        <Link to="/home">Home</Link> | 
        <Link to="/about">About</Link> | 
        <Link to="/contact">Contact</Link>
      </p>
    )
  }
}

export default Navigation;

home.js

import React, { Component } from 'react';

class Home extends Component {
  render(){
    return(
      <p>This is home.</p>
    )
  }
}

export default Home;

about.js

import React, { Component } from 'react';

class About extends Component {
  render(){
    return(
      <p>This is About.</p>
    )
  }
}

export default About;

contact.js

import React, { Component } from 'react';

class Contact extends Component {
  render(){
    return(
      <p>This is Contact.</p>
    )
  }
}

export default Contact;

Output

File Structure:

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.