Quick Recap | React Routing

routing basic Example | quick recap

React component with Basic Routing

In the src directory, create one component file called App.js and put the following code into it.

// App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
        <div>
          <h2>Welcome to React Router Tutorial</h2>
        </div>
    );
  }
}
export default App;

Now, in the main.js file, put the following into it.

// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'));

The Router

There are two types of router object.

BrowserRouter
HashRouter

If we want to handle the dynamic request then use BrowserRouter and if we want to serve the static request then use HashRouter.

History

Every router creates history object to keep track of the current location of the page.

Rendering a

If we take our above example then it will look like this.

// main.js
import { BrowserRouter } from 'react-router-dom'
import App from './App';
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

This is how we can render the BrowserRouter object.

Step 2: Make three components.

First, make one components directory and in that make Home.js component.

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

Second make About.js component.

// Home.js
import React, { Component } from 'react';
class About extends Component {
  render() {
    return (
        <div>
          <h2>About</h2>
        </div>
    );
  }
}
export default About;

Third make Contact.js component.

// Contact.js

import React, { Component } from 'react';
class Contact extends Component {
  render() {
    return (
        <div>
          <h2>Contact</h2>
        </div>
    );
  }
}
export default Contact;

Step 3: Register the routes in the App.js file.

// App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
class App extends Component {
  render() {
    return (
    <Router>
        <div>
          <h2>Welcome to React Router Tutorial</h2>
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <ul className="navbar-nav mr-auto">
            <li><Link to={'/'} className="nav-link"> Home </Link></li>
            <li><Link to={'/contact'} className="nav-link">Contact</Link></li>
            <li><Link to={'/about'} className="nav-link">About</Link></li>
          </ul>
          </nav>
          <hr />
          <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/contact' component={Contact} />
              <Route path='/about' component={About} />
          </Switch>
        </div>
      </Router>
    );
  }
}
export default App;

The final main.js file will look like this.

// main.js
import React from 'react';
import { render } from 'react-dom';
import App from './App';
render(
  <App />, document.getElementById('app'));

Our index.html file looks like this.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <title>React Router Tutorial</title>
</head>
<body>
    <div id="App" class="container"></div>
</body>
</html>

So, finally our output is working and you can navigate the routes and see according to that output is changing.React Router

PreviousQuick Recap | New Lifecycle NextContext API | React JS

Last updated 6 years ago

Was this helpful?

hashtag React component with Basic Routing

hashtagThe Router

hashtagHistory

hashtagRendering a

hashtagStep 2: Make three components.

hashtagStep 3: Register the routes in the App.js file.