Day-9 Managing Navigation with React JS Router

Understanding and Implementing Navigation in Your React JS Applications

In the past few articles, we have seen the react basic concepts now moving forward we are going to see other libraries which is used with react to create a fully functional web application. Like before we will keep articles compact with the required content only. So you can focus on learning the concepts.

Are you building a ReactJS application and looking for a way to manage navigation between different pages? Look no further than the ReactJS Router library! In this article, we’ll cover the basics of ReactJS Router and show you how to use it to manage navigation in your ReactJS applications.

What is ReactJS Router? ReactJS Router is a library that allows you to handle routing and navigation in your ReactJS applications. It provides a way to map URLs to different components and render them based on the current URL.

How to Install ReactJS Router To use ReactJS Router, you first need to install it. You can do this by running the following command in your terminal:

npm install react-router-dom

Once installed, you can import it into your ReactJS application like this:

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

Basic Usage of ReactJS Router Now that you have ReactJS Router installed, let’s take a look at some basic usage examples.

First, we’ll set up a basic navigation menu with links to different pages. Here’s what the code looks like:

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';
function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
c      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
      </Switch>
    </Router>
  );
}
export default App;

In this example, we’re using the <Link> component to create links to our different pages. We're also using the <Route> component to map each URL to a specific component. The <Switch> component is used to render the first child <Route> that matches the current URL.

Advanced Usage of ReactJS Router ReactJS Router also provides a lot of advanced features that you can use to build more complex navigation systems. For example, you can use nested routes to create sub-pages within your application.

Here’s an example of how you can use nested routes:

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';
import UserProfile from './pages/UserProfile';
function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
        <Route path="/users">
          <UserProfile />
        </Route>
      </Switch>

1. Single-page applications (SPAs): React Router is often used to create SPAs where navigation occurs within the same page without requiring a full page reload. It allows you to define routes for different components or pages within your application and dynamically render them as the user navigates.
2. Nested routes: React Router supports nested routes, which means you can have sub-routes within your main routes. This is useful for creating complex applications with multiple levels of navigation.
3. Dynamic routing: React Router allows you to define dynamic routes that can accept parameters, such as IDs or usernames. This is useful for building applications with dynamic content that depends on user input.
4. Authentication and authorization: React Router can be used to control access to certain routes based on user authentication or authorization status. For example, you can redirect users to a login page if they try to access a protected route without being logged in.
5. Server-side rendering: React Router can be used with server-side rendering to improve the performance of your application. Server-side rendering allows you to pre-render the initial HTML for your application on the server, which can result in faster load times and better search engine optimization (SEO).

These are just a few examples of the different ways in which React Router can be used in your ReactJS applications.

Here are some resources I have curated for you to become master in react routers

1. React Router Documentation: https://reactrouter.com/web/guides/quick-start
2. React Router Tutorial: https://reactrouter.com/en/6.8.1/start/examples
3. https://hygraph.com/blog/routing-in-react
4. https://www.knowledgehut.com/blog/web-development/routing-in-reactjs