React JS Setting up routes


Setting up routes in a React application using React Router involves defining how different URLs should map to different components or views. Here’s a step-by-step guide to setting up routes:

1. Install React Router

First, make sure you have React Router installed. You can add it to your project using npm or yarn:

npm install react-router-dom

or

yarn add react-router-dom

2. Import Required Components

In your main application file (usually App.js or index.js), import the necessary components from react-router-dom:


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

3. Create Components for Different Views

Define the components you want to render for different routes. For example:

function Home() { return <h2>Home Page</h2>; } function About() { return <h2>About Page</h2>; } function Contact() { return <h2>Contact Page</h2>; }

4. Set Up the Router

Wrap your application with Router (typically BrowserRouter for web applications) and define your routes using Route components inside a Switch component:

function App() { return ( <Router> <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> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </div> </Router> ); }

5. Understanding the Components

  • BrowserRouter: Provides the routing context for your application. It's the most common router for web apps and uses the HTML5 history API to keep your UI in sync with the URL.

  • Route: Defines a mapping between a URL path and a component. The path prop specifies the URL, and the component prop specifies the component to render. You can use exact to ensure the route matches exactly.

  • Switch: Renders the first child Route that matches the current URL. This ensures that only one route is rendered at a time.

  • Link: Provides navigation to different routes. It replaces traditional anchor tags (<a>) to enable client-side navigation without reloading the page.

6. Using Route Parameters

You can use route parameters to capture dynamic parts of the URL. For example:

function UserProfile({ match }) { return <h2>User Profile for user with ID: {match.params.id}</h2>; } function App() { return ( <Router> <div> <nav> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/users/1">User 1</Link></li> <li><Link to="/users/2">User 2</Link></li> </ul> </nav> <Switch> <Route exact path="/" component={Home} /> <Route path="/users/:id" component={UserProfile} /> </Switch> </div> </Router> ); }

In this example:

  • The UserProfile component can access the dynamic id parameter from the URL using match.params.id.

Summary

Setting up routes in React Router involves:

  1. Installing React Router.
  2. Importing necessary components.
  3. Creating view components.
  4. Setting up routing with Router, Route, and Switch.
  5. Using Link for navigation and route parameters for dynamic URLs.

This setup allows you to build a navigable, single-page application with React Router handling the routing logic.