Routing in react js for Begineers

What is Routing?

Routing in a web application refers to determining which component should be displayed based on the current URL. For example, you might want to display a homepage when the URL is /, an about page when the URL is /about, and so on.

Steps to Setting Up Routing
 

1. Install react-router-dom

First, you need to install the react-router-dom package, which provides the necessary tools for routing in React.

npm install react-router-dom

2. Basic Setup

Create a React application if you haven't already.

npx create-react-app my-app
cd my-app

3. Set Up the Router in App.js

Let's set up the router in your App.js file.

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';
import Navigation from './Navigation';
function App() {
  return (
    <Router>
      <Navigation />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}
export default App;

4. Create the Components

Create the components that will be rendered for each route.

Home.js

import React from 'react';
function Home() {
  return <h1>Home Page</h1>;
}
export default Home;

About.js

import React from 'react';
function About() {
  return <h1>About Page</h1>;
}
export default About;

NotFound.js

import React from 'react';
function NotFound() {
  return <h1>404 - Not Found</h1>;
}
export default NotFound;

5. Navigation Links

Create a Navigation component to provide links for navigation.

Navigation.js

import React from 'react';
import { Link } from 'react-router-dom';
function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
}
export default Navigation;

How Does It Work?

1. Router: The BrowserRouter (aliased as Router) component wraps your application and enables routing.
2. Route: The Route component defines a mapping between a URL path and a component. The exact prop ensures the route matches exactly.
3. Switch: The Switch component renders the first child Route that matches the URL. If no route matches, the NotFound component is displayed.
4. Link: The Link component is used to create navigation links. These links change the URL without causing a page to reload.

Run Your Application

Start your application by running.

npm start

Navigate to http://localhost:3000 in your browser. You should see the Home page. Click on the "About" link to navigate to the About page, and enter any other URL (like /XYZ) to see the NotFound page.

Summary

This article covered the basics of setting up routing in a React application using react-router-dom. By following these steps, you can create a multi-page application with navigation and different components rendered based on the URL. For more advanced routing features, refer to the react-router-dom documentation.