React Routing

React routing

Created By: chatGPT

In a React application, routing allows you to navigate between different components and views without reloading the page. The primary library used for routing in React is React Router. This library provides a way to create dynamic routing in your application. Here's a simple example to get you started.

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

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const NotFound = () => <h2>404 Not Found</h2>;

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to='/'>Home</Link>
            </li>
            <li>
              <Link to='/about'>About</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path='/' exact component={Home} />
          <Route path='/about' component={About} />
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

In this example, we first import the necessary components from react-router-dom. The Router component wraps the entire application to enable routing functionality. We create three components: Home, About, and NotFound. The Link component is used to create navigation links to different routes.The Switch component is essential as it renders the first child Route that matches the current URL. In this case, if the path is '/', it renders the Home component. If the path is '/about', it renders the About component. If there are no matches, it shows the NotFound component.

To install React Router, you can run the following command in your project directory. This will add the library to your dependencies.

npm install react-router-dom

Once installed, you can use it to manage your routes effectively. This setup helps keep your application efficient and user-friendly by allowing seamless navigation.