Router In React.js

React Router

React Router is a popular library for handling routing in React.js applications. It provides a declarative way to define navigation and nested views in a single-page application. React Router enables developers to create dynamic, client-side routing without the need for page reloads. Here's an overview of React Router:

---

1. Installation

To get started with React Router, you can install it using npm or yarn:

npm install react-router-dom

---

2. BrowserRouter

The BrowserRouter component is used to wrap the root of your application and provide routing functionality. It uses HTML5 history API to keep your UI in sync with the URL.

Example:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <AppRouter />
    </BrowserRouter>
  );
};

export default App;

---

3. Route

The Route component is used to define a route in your application. It renders a UI component when the path matches the current URL.

Example:

import React from 'react';
import { Route } from 'react-router-dom';

const Home = () => {
  return <h1>Home Page</h1>;
};

const About = () => {
  return <h1>About Page</h1>;
};

const AppRouter = () => {
  return (
    <div>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
};

export default AppRouter;

---

4. Link

The Link component is used to navigate between different routes in your application without reloading the page.

Example:

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

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
};

export default Navbar;

---

5. Redirect

The Redirect component is used to redirect to a different route programmatically.

Example:

import React from 'react';
import { Redirect } from 'react-router-dom';

const ProtectedRoute = ({ isAuthenticated }) => {
  if (!isAuthenticated) {
    return <Redirect to="/login" />;
  }

  return <Route {...rest} />;
};

export default ProtectedRoute;

---

6. Nested Routes

React Router allows you to nest routes within other routes, enabling you to create complex nested layouts in your application.

Example:

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

const Dashboard = () => {
  return <h1>Dashboard</h1>;
};

const Settings = () => {
  return <h1>Settings</h1>;
};

const AppRouter = () => {
  return (
    <Switch>
      <Route path="/dashboard" component={Dashboard} />
      <Route path="/settings" component={Settings} />
    </Switch>
  );
};

export default AppRouter;

---

7. Conclusion

React Router is an essential tool for handling navigation and routing in React.js applications. By using components like BrowserRouter, Route, Link, and Redirect, developers can create dynamic and interactive user experiences with client-side routing.