Simplest way to add routing in React

In React, you can implement routing using the React Router library. React Router is a popular and the simpler library for managing routing in single-page applications built with React.

Here are the basic steps for implementing routing in a React application using React Router:

1. Install React Router:

npm install react-router-dom

2. Wrap your application with the BrowserRouter component:

import { BrowserRouter } from 'react-router-dom'; function App() { return ( <BrowserRouter> {/* Your application code goes here */} </BrowserRouter> );
}

3. Define your routes using the Route component:

import { Route } from 'react-router-dom'; function App() { return ( <BrowserRouter> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </BrowserRouter> );
}

In this example, we’ve defined three routes using the Route component. The exact prop is used on the first route to ensure that it matches only the exact path (/), and not any paths that start with /.

4. Use the Link component to navigate between routes:

import { Link } from 'react-router-dom'; function App() { return ( <div> <nav> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> </nav> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </div> );
}

Conclusion :

In this example, we’ve added a navigation menu using the Link component to navigate between the defined routes. The to prop is used to specify the destination route.

That’s it! With these steps, you should now have a basic routing system set up in your React application using React Router.

Follow me and hit like if you really enjoy this short and simplist way of implementing the routeing in react application.
In case you need my help you can reach out to me anytime.I will respond at my earliest.

Thank you very much for reading till end.
Stay Safe ! Stay Blessed !