Reactjs Tutorials – React Router

In this tutorial, you will get an idea about react-router v4 which is a stable version and used in most react projects.

Setup Installation:

npm install -g create-react-app
npx create-react-app tutoral-router-app
cd tutoral-router-app

Package Installation:

npm install react-router-dom

After complition of project setup and package installation, there app.js file (src/app.js),

import React from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
function App() {
  return (
    <div className=”App”>
      <header className=”App-header”>
        <img src={logo} className=”App-logo” alt=”logo” />
        <p>  Edit <code>src/App.js</code> and save to reload.  </p>
        <a   className=”App-link” href=”https://reactjs.org” target=”_blank” rel=”noopener noreferrer” >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

this is a by default generated code there is no code for routing. Now we need to implement React router in our app so we can easily navigate our pages, for that, Let’s create two more components in root directory.

src/Home.js

import React, { Component } from ‘react’;
class Home extends Component {
    render() {
        return (
            <div>
                <h1>This is a Home page</h1>
            </div>
        );
    }
}
export default Home;

src/About.js

import React, { Component } from ‘react’;
class About extends Component {
    render() {
        return (
            <div>
                <h1>This is a About us page</h1>
            </div>
        );
    }
}
export default About ;

 

we already installed react router package in project setup process (npm install react-router-dom).

 

 

 

Leave a Reply

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