Part 1. Routing in React JS Step-by-Step Examples

React Routing is crucial for single-page applications (SPA) as it controls navigation and displays different content based on the URL. React Router is a popular library that makes this process simple and efficient in this guide.

First, you need to install the react-router-dom package in your React project.

npm install react-router-dom

Project Structure
Here’s a basic project structure for setting up React Router:

my-app/
├── public/
├── src/
│   ├── components/
│   │   ├── Home.js
│   │   ├── About.js
│   │   ├── Contact.js
│   ├── App.js
│   ├── index.js
├── package.json

Creating Components
Create the components for different routes.

Home.js

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page!</p>
    </div>
  );
};

export default Home;

About.js

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
    </div>
  );
};

export default About;

Contact.js

import React from 'react';

const Contact = () => {
  return (
    <div>
      <h1>Contact Page</h1>
      <p>Get in touch with us.</p>
    </div>
  );
};

export default Contact;

*Setting Up Routes in *App.js
Now, set up the routes in your App.js file using React Router.

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

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

export default App;

Index.js
Ensure yourindex.js renders the App component.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Running Your Application
Start your React application to see the routing in action.

npm start

It is advanced in Adding Nested Routing Examples.
Adding Nested Routes
You can also add nested routes for more complex navigation structures.

Dashboard.js

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

const Dashboard = () => {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Dashboard</h2>
      <ul>
        <li>
          <Link to={`${url}/profile`}>Profile</Link>
        </li>
        <li>
          <Link to={`${url}/settings`}>Settings</Link>
        </li>
      </ul>

      <Route path={`${path}/profile`} component={Profile} />
      <Route path={`${path}/settings`} component={Settings} />
    </div>
  );
};

const Profile = () => <h3>Profile</h3>;
const Settings = () => <h3>Settings</h3>;

export default Dashboard;

Routing **in **React is essential for building modern web applications. With React Router, you can manage routes effortlessly and create dynamic, user-friendly interfaces. This guide covers the basics, but there’s much more to explore, such as dynamic routing, route guards, and custom hooks. Experiment with these concepts to build robust and scalable applications.