Part 1. Routing in React JS Step-by-Step Examples
Tags: webdev, javascript, programming, beginners
Published: 2024-07-03 17:13:37

**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 your` index.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.