reactjs
  1. reactjs-router
PreviousNext

ReactJs Router

ReactJs Router is a powerful tool for building dynamic web applications. It provides a way to manage routing and navigation within your React application. Using ReactJs Router, you can create multiple pages and manage page transitions and URL updates.

Syntax

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

function App() {
   return (
     <BrowserRouter>
      <div>
         <Switch>
            <Route exact path="/">
               <Home />
            </Route>
            <Route path="/about">
               <About />
            </Route>
            <Route path="/contact">
               <Contact />
            </Route>
         </Switch>
      </div>
     </BrowserRouter>
   );
}

Example

Let's create a simple example where we will create three pages - Home, About, and Contact. We will use ReactJs Router to manage the routing and navigation between these pages. 

import React from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <p>Welcome to the Home Page.</p>
      <Link to="/about">About</Link>
      <br />
      <Link to="/contact">Contact</Link>
    </div>
  );
}

function About() {
  return (
    <div>
      <h1>About</h1>
      <p>Welcome to the About Page.</p>
      <Link to="/">Home</Link>
      <br />
      <Link to="/contact">Contact</Link>
    </div>
  );
}

function Contact() {
  return (
    <div>
      <h1>Contact</h1>
      <p>Welcome to the Contact Page.</p>
      <Link to="/">Home</Link>
      <br />
      <Link to="/about">About</Link>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

Output

When you run the above example, you will see the Home page by default. You can navigate to the other pages by clicking the links on the page.

Explanation

In the above example, we have created three pages - Home, About, and Contact. We have used the BrowserRouter, Route, Switch, and Link components from ReactJs Router.

The BrowserRouter component wraps the entire application and provides the routing context. The Route component specifies which component should render when a certain URL is requested. The Switch component is used to ensure that only one Route component is rendered at a time. The Link component is used to create links between different pages.

Use

  • ReactJs Router can be used to create multiple pages within a React application.
  • It can be used to manage routing and navigation within the application.
  • ReactJs Router can also be used to implement authentication and authorization in a web application.

Important Points

  • ReactJs Router provides a way to manage routing and navigation within your React application.
  • It uses a component-based approach to manage routing, which means that each URL is treated as a separate component.
  • ReactJs Router allows you to create multiple pages and manage page transitions and URL updates.
  • ReactJs Router can be used with other React libraries and frameworks, such as Redux and Next.js.

Summary

ReactJs Router is a powerful tool for managing routing and navigation within a React application. It provides a way to create multiple pages within an application and manage page transitions and URL updates. Using ReactJs Router, you can create a dynamic and responsive web application that provides a great user experience.

FragmentsCSS
Published on: