React Router

React Router is a powerful library for managing navigation and routing in React applications. It allows you to create single-page applications with multiple views and navigate between them seamlessly. In this section, we’ll cover setting up React Router, creating navigation with Link and NavLink, and defining and using route parameters.

Setting Up React Router

To get started with React Router, you need to install the react-router-dom package.

Step 1: Install React Router

				
					npm install react-router-dom

Step 2: Set Up the Router

In your main application file (e.g., App.js), set up the router by wrapping your application in BrowserRouter and defining your routes using Route.

Example:

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

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

export default App;

In this example:

BrowserRouter is used to wrap the entire application, enabling routing capabilities.
Route is used to define individual routes, with path specifying the URL and component specifying the component to render.
Switch ensures that only one route is rendered at a time.

Creating Navigation with Link and NavLink

Link and NavLink components are used to create navigation links in your application.

Using Link:

The Link component is used to create navigation links that allow users to navigate to different routes.

Example:

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

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

export default App;

Using NavLink:

The NavLink component is similar to Link but provides additional styling options for the active link.

Example:

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <NavLink exact to="/" activeClassName="active">
                Home
              </NavLink>
            </li>
            <li>
              <NavLink to="/about" activeClassName="active">
                About
              </NavLink>
            </li>
            <li>
              <NavLink to="/contact" activeClassName="active">
                Contact
              </NavLink>
            </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;

In this example, the activeClassName prop is used to apply the active class to the active link, allowing you to style it differently.

Defining and Using Route Parameters

Route parameters allow you to create dynamic routes that can accept input as part of the URL. These parameters can be accessed in the component using the match object.

Example:

Define the Route with Parameters:

				
					// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import UserProfile from './UserProfile';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <NavLink exact to="/" activeClassName="active">
                Home
              </NavLink>
            </li>
            <li>
              <NavLink to="/about" activeClassName="active">
                About
              </NavLink>
            </li>
            <li>
              <NavLink to="/contact" activeClassName="active">
                Contact
              </NavLink>
            </li>
            <li>
              <NavLink to="/user/john" activeClassName="active">
                John’s Profile
              </NavLink>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/user/:username" component={UserProfile} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

2. Define the Route with Parameters:

				
					// UserProfile.js
import React from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
  let { username } = useParams();

  return (
    <div>
      <h2>User Profile</h2>
      <p>Username: {username}</p>
    </div>
  );
}

export default UserProfile;

In this example:

The route /user/:username defines a route parameter username.
The useParams hook is used within the UserProfile component to access the route parameter and display it.

Conclusion

React Router is a powerful tool for managing navigation and routing in React applications. By setting up React Router, creating navigation with Link and NavLink, and defining and using route parameters, you can build dynamic and responsive single-page applications. These skills are essential for creating user-friendly and maintainable React applications.

Contents

React Router

Setting Up React Router

Creating Navigation with Link and NavLink

Defining and Using Route Parameters

Conclusion

Related Chapters

CATEGORY

ABOUT US

GET IN TOUCH

FOLLOW US