React Router

Introduction to React Router

React Router is a library that allows you to handle routing in your React applications. It provides a way to navigate between different pages or views without refreshing the entire page. This is especially useful when building single-page applications.

React Router is built on top of the React library and uses its component-based architecture. It provides a set of components that allow you to define routes and link them to specific components or views.

To get started with React Router, you'll need to install the react-router-dom package. This package includes the necessary components and functionalities for web applications.

// Let's start with a simple example

// First, let's install React Router using npm

// Open your terminal and run this command:

// npm install react-router-dom

// React Router is divided into three packages - react-router, react-router-dom, and react-router-native.

// For web applications, we'll be using react-router-dom.

// Next, let's import the necessary components from react-router-dom

// In your JavaScript file, add the following import statements:

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

// The `Router` component is the root component that wraps around your application. It provides the routing functionality.

// The `Route` component is used to define a route.

// The `Link` component is used to create links to different routes in your application.

// Here's an example of how to use these components:

<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>

    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </div>
</Router>

// In this example, we have defined three routes - Home, About, and Contact.

// The `exact` prop on the Home route is used to specify that the route should only be matched if the current URL is an exact match.

// To create a component for each route, you can use functional components or class components.

// Here's an example of how to define the Home, About, and Contact components:

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

const About = () => {
  return (
    <div>
      <h2>About</h2>
      <p>Welcome to the About page!</p>
    </div>
  );
};

const Contact = () => {
  return (
    <div>
      <h2>Contact</h2>
      <p>Welcome to the Contact page!</p>
    </div>
  );
};

In this example, we have created a simple navigation with three routes - Home, About, and Contact. The Link component is used to create clickable links that navigate to the specified route. The Route component is used to map the route path to a specific component.

When the route path matches the current URL, the corresponding component will be rendered.

React Router provides many other functionalities, such as nested routes, route parameters, and route guards. These features allow you to create complex routing systems and handle dynamic data in your application.

React Router is widely used in the React ecosystem and has become a standard library for managing routing in React applications.

```javascript
// Let's start with a simple example

// First, let's install React Router using npm

// Open your terminal and run this command:

// npm install react-router-dom

// React Router is divided into three packages - react-router, react-router-dom, and react-router-native.

// For web applications, we'll be using react-router-dom.

// Next, let's import the necessary components from react-router-dom

// In your JavaScript file, add the following import statements:

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

// The `Router` component is the root component that wraps around your application. It provides the routing functionality.

// The `Route` component is used to define a route.

// The `Link` component is used to create links to different routes in your application.

// Here's an example of how to use these components:

<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>

    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </div>
</Router>

// In this example, we have defined three routes - Home, About, and Contact.

// The `exact` prop on the Home route is used to specify that the route should only be matched if the current URL is an exact match.

// To create a component for each route, you can use functional components or class components.

// Here's an example of how to define the Home, About, and Contact components:

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

const About = () => {
  return (
    <div>
      <h2>About</h2>
      <p>Welcome to the About page!</p>
    </div>
  );
};

const Contact = () => {
  return (
    <div>
      <h2>Contact</h2>
      <p>Welcome to the Contact page!</p>
    </div>
  );
};
```

React Router is built on top of the ________ library and uses its component-based architecture.

Setting up React Router

To set up React Router in a React project, you'll need to follow these steps:

1. Install React Router

First, you'll need to install the react-router-dom package. This package includes the necessary components and functionalities for web applications.

npm install react-router-dom

1. Import the necessary components

In your JavaScript file, import the necessary components from react-router-dom:

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

• The Router component is the root component that wraps around your application. It provides the routing functionality.

• The Route component is used to define a route.

• The Link component is used to create links to different routes in your application.

1. Define routes

Next, you'll need to define the routes in your application using the Route component:

<Router>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/" className="nav-link">Home</Link>
        </li>
        <li>
          <Link to="/about" className="nav-link">About</Link>
        </li>
        <li>
          <Link to="/contact" className="nav-link">Contact</Link>
        </li>
      </ul>
    </nav>

    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </div>
</Router>

• In this example, we have defined three routes - Home, About, and Contact.

• The exact prop on the Home route is used to specify that the route should only be matched if the current URL is an exact match.

• To create a component for each route, you can use functional components or class components.

1. Create the components

Finally, you'll need to create the component functions for each route. Here's an example:

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

const About = () => {
  return (
    <div>
      <h2>About</h2>
      <p>Welcome to the About page!</p>
    </div>
  );
};

const Contact = () => {
  return (
    <div>
      <h2>Contact</h2>
      <p>Welcome to the Contact page!</p>
    </div>
  );
};

• In this example, we have created functional components for the Home, About, and Contact routes.

That's it! With these steps, you have successfully set up React Router in your React project. Now you can navigate between different routes and render the corresponding components.

Remember to consider accessibility and best practices when designing your routes and components!

```javascript
// Replace the following code with the setup instructions for React Router in a React project

// First, let's install React Router using npm

// Open your terminal and run this command:

// npm install react-router-dom

// React Router is divided into three packages - react-router, react-router-dom, and react-router-native.

// For web applications, we'll be using react-router-dom.

// Next, let's import the necessary components from react-router-dom

// In your JavaScript file, add the following import statements:

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

// The `Router` component is the root component that wraps around your application. It provides the routing functionality.

// The `Route` component is used to define a route.

// The `Link` component is used to create links to different routes in your application.

// Here's an example of how to use these components:

<Router>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/" className="nav-link">Home</Link>
        </li>
        <li>
          <Link to="/about" className="nav-link">About</Link>
        </li>
        <li>
          <Link to="/contact" className="nav-link">Contact</Link>
        </li>
      </ul>
    </nav>

    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </div>
</Router>

```

What is the first step to set up React Router in a React project?

Navigating with React Router

To navigate between different pages using React Router, you can use the Link component from react-router-dom. This component allows you to create links to different routes in your application.

Here's an example of how to use the Link component:

import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      <h2>Home</h2>
      <Link to="/about">Go to About</Link>
    </div>
  );
};

In this example, we have a Link component that points to the /about route. When the user clicks on this link, they will be navigated to the About page.

You can also use the Link component with dynamic routes by passing route parameters:

import { Link } from 'react-router-dom';

const User = ({ id }) => {
  return (
    <div>
      <h2>User</h2>
      <Link to={`/user/${id}`}>Go to User {id}</Link>
    </div>
  );
};

In this example, the Link component is used with a dynamic route parameter id. The value of id will be passed as part of the route URL.

The Link component is a great way to handle navigation in your React Router application, allowing users to easily move between different pages.

```javascript
// Navigating with React Router

// To navigate between different pages using React Router, you can use the `Link` component from `react-router-dom`. This component allows you to create links to different routes in your application.

// Here's an example of how to use the `Link` component:

import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      <h2>Home</h2>
      <Link to="/about">Go to About</Link>
    </div>
  );
};

// In this example, we have a `Link` component that points to the `/about` route. When the user clicks on this link, they will be navigated to the About page.

// You can also use the `Link` component with dynamic routes by passing route parameters:

import { Link } from 'react-router-dom';

const User = ({ id }) => {
  return (
    <div>
      <h2>User</h2>
      <Link to={`/user/${id}`}>Go to User {id}</Link>
    </div>
  );
};

// In this example, the `Link` component is used with a dynamic route parameter `id`. The value of `id` will be passed as part of the route URL.

// The `Link` component is a great way to handle navigation in your React Router application, allowing users to easily move between different pages.

```

To navigate between different pages using React Router, you can use the ________ component from react-router-dom. This component allows you to create links to different routes in your application.

Here's an example of how to use the Link component:

import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      <h2>Home</h2>
      <Link to="/about">Go to About</Link>
    </div>
  );
};

In this example, we have a Link component that points to the /about route. When the user clicks on this link, they will be navigated to the About page.

You can also use the Link component with dynamic routes by passing route parameters:

import { Link } from 'react-router-dom';

const User = ({ id }) => {
  return (
    <div>
      <h2>User</h2>
      <Link to={`/user/${id}`}>Go to User {id}</Link>
    </div>
  );
};

In this example, the Link component is used with a dynamic route parameter id. The value of id will be passed as part of the route URL.

The Link component is a great way to handle navigation in your React Router application, allowing users to easily move between different pages.

Passing Data with React Router

When building single-page applications, it is often necessary to pass data between different pages. React Router provides two main ways to achieve this: URL parameters and state.

URL Parameters

URL parameters allow you to define dynamic routes and access the parameters in the target component. To use URL parameters with React Router, you can specify a dynamic route in your route configuration and access the parameters in the component.

Here's an example of defining a dynamic route and accessing the parameter in the component:

import { Route } from 'react-router-dom';

const User = ({ match }) => {
  const { id } = match.params;

  // Use the id to fetch user data or perform
  // any other necessary operations

  return (
    <div>
      <h2>User {id}</h2>
      {/* Display user information */}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Route path="/user/:id" component={User} />
    </div>
  );
};

In this example, we define a dynamic route '/user/:id' which matches any path starting with '/user/' followed by a value for 'id'. In the 'User' component, we access the 'id' parameter using 'match.params.id' and can use it to fetch user data or perform any other necessary operations.

State

React Router also provides a convenient way to pass data between routes using state. When navigating to a new route, you can include a state object which will be passed to the target component.

Here's an example of navigating to a new route and passing state:

import { useHistory } from 'react-router-dom';

const App = () => {
  const history = useHistory();

  const handleNavigate = () => {
    const state = { id: 123 };

    history.push({
      pathname: '/user',
      state: state
    });
  };

  return (
    <div>
      <button onClick={handleNavigate}>Go to User</button>
    </div>
  );
};

const User = ({ location }) => {
  const { id } = location.state;

  // Use the id to display user information or perform
  // any other necessary operations

  return (
    <div>
      <h2>User {id}</h2>
      {/* Display user information */}
    </div>
  );
};

In this example, we use the 'useHistory' hook to access the history object. When the button is clicked, we create a state object with the 'id' property and navigate to the '/user' route, passing the state object as part of the location. In the 'User' component, we access the state using 'location.state.id' and can use it to display user information or perform any other necessary operations.

```javascript
// Passing data using React Router

// In React Router, data can be passed between pages using
// URL parameters and state.

// URL Parameters

// To pass data through URL parameters, you can specify
// a dynamic route in your route configuration and
// access the parameters in the component.

// Route configuration:
// <Route path="/user/:id" component={User} />

// Component:
// const User = ({ match }) => {
//   const { id } = match.params;
//   // Use the id to fetch user data
//   // ...
// }

// The above code defines a dynamic route '/user/:id'
// which matches any path starting with '/user/'
// followed by a value for 'id'. In the 'User' component,
// the parameter is accessed using 'match.params.id'
// and can be used to fetch user data or perform any
// other necessary operations.

// State

// React Router also provides a convenient way to pass
// data between routes using state. When navigating to a
// new route, you can include a state object which will
// be passed to the target component.

// Navigation:
// history.push({
//   pathname: '/user',
//   state: { id: 123 }
// });

// Component:
// const User = ({ location }) => {
//   const { id } = location.state;
//   // Use the id to display user information
//   // ...
// }

// In the above code, the 'history.push' method is used
// to navigate to the '/user' route and pass a state
// object with the 'id' property. In the 'User' component,
// the state is accessed using 'location.state.id' and
// can be used to display user information or perform
// any other necessary operations.
```

Which method allows you to pass data between routes using React Router?

Nested Routes with React Router

In complex web applications, you may need to render components within other components based on the current route. React Router provides support for creating nested routes, allowing you to build a nested component structure to handle different URL paths.

To create nested routes with React Router, you can configure Routes and nested Route components to match specific paths. Here's an example:

// replace with code relevant to content
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <div>
        <h1>My App</h1>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/products" component={Products} />
          <Route path="/products/:id" component={ProductDetails} />
        </Switch>
      </div>
    </Router>
  );
};

const Home = () => {
  return <h2>Welcome to My App</h2>;
};

const Products = () => {
  return (
    <div>
      <h2>Product List</h2>
      <ul>
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
      </ul>
    </div>
  );
};

const ProductDetails = ({ match }) => {
  const { id } = match.params;
  return <h2>Details for Product #{id}</h2>;
};

In this example, we define three routes - the root route, the '/products' route, and the '/products/:id' route. The Switch component ensures that only one matching route is rendered at a time. When the URL matches the path for a specific route, the corresponding component will be rendered.

By using nested Route components, you can create a nested component structure. For example, within the '/products' route, you can render a list of products, and within the '/products/:id' route, you can render the details of a specific product.

Nested routes provide a flexible way to manage the component hierarchy and handle different levels of nesting in your application. You can easily organize and navigate through different sections of your application by defining nested routes.

In a real-world scenario, this could be useful if you are building an e-commerce website. You can have a main route for '/products', which renders a list of products. When a user clicks on a specific product, the '/products/:id' route is matched, and the details of that product are displayed.

Overall, nested routes with React Router offer a powerful and intuitive way to handle complex routing scenarios in your React applications.

```javascript
// replace with JavaBackend logic relevant to content
for (int i = 1; i <= 100; i++) {
  if (i % 3 == 0 && i % 5 == 0) {
      System.out.println("FizzBuzz");
  } else if (i % 3 == 0) {
      System.out.println("Fizz");
  } else if (i % 5 == 0) {
      System.out.println("Buzz");
  } else {
      System.out.println(i);
  }
}
```

Nested routes in React Router allow you to create a nested component structure based on the current URL path.

Dynamic Routes with React Router

In web applications, you often need to create dynamic routes that change based on user input or data. React Router provides a flexible way to handle dynamic routes and generate routes dynamically.

One common use case for dynamic routes is when you want to display detailed information about a specific item from a list. For example, if you have an array of articles, each with a unique ID, you can generate routes for each article ID dynamically.

Here's an example of dynamically generating routes based on article IDs:

// Suppose you have an array of articles with unique IDs
const articles = [
  { id: 1, title: 'Article 1', content: 'Lorem ipsum dolor sit amet' },
  { id: 2, title: 'Article 2', content: 'Consectetur adipiscing elit' },
  { id: 3, title: 'Article 3', content: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' }
];

// Dynamically generating routes based on article IDs
const App = () => {
  return (
    <Router>
      <div>
        <h1>My App</h1>
        <Switch>
          <Route exact path="/" component={Home} />
          {articles.map(article => (
            <Route key={article.id} path={`/articles/${article.id}`}>{() => <Article article={article} />}</Route>
          ))}
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  );
};

const Home = () => {
  return <h2>Welcome to My App</h2>;
};

const Article = ({ article }) => {
  return (
    <div>
      <h2>{article.title}</h2>
      <p>{article.content}</p>
    </div>
  );
};

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

In this example, we have an array of articles with unique IDs. We use the map function to dynamically generate Route components for each article. The path property of each Route is set to /articles/${article.id}, creating a route for each article ID.

When a user navigates to /articles/1, for example, the Article component is rendered with the corresponding article data. If the user enters an invalid article ID, the NotFound component is displayed.

By utilizing dynamic routes, you can create dynamic and interactive experiences in your React applications. Whether it's displaying detailed information, generating routes based on user input, or handling dynamic data, React Router enables you to handle dynamic routes with ease.

```javascript
// replace with TS/JS logic relevant to content

// Suppose you have an array of articles with unique IDs
const articles = [
  { id: 1, title: 'Article 1', content: 'Lorem ipsum dolor sit amet' },
  { id: 2, title: 'Article 2', content: 'Consectetur adipiscing elit' },
  { id: 3, title: 'Article 3', content: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' }
];

// Dynamically generating routes based on article IDs
const App = () => {
  return (
    <Router>
      <div>
        <h1>My App</h1>
        <Switch>
          <Route exact path="/" component={Home} />
          {articles.map(article => (
            <Route key={article.id} path={`/articles/${article.id}`}>{() => <Article article={article} />}</Route>
          ))}
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  );
};

const Home = () => {
  return <h2>Welcome to My App</h2>;
};

const Article = ({ article }) => {
  return (
    <div>
      <h2>{article.title}</h2>
      <p>{article.content}</p>
    </div>
  );
};

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};
```

React Router provides a flexible way to handle _________________ in your application. The ability to generate routes dynamically based on user input or data allows for a dynamic and interactive user experience.

Protected Routes with React Router

In many web applications, there are certain routes that should be accessible only to authenticated or authorized users. React Router provides a way to create protected routes that require authentication or authorization before allowing access to certain pages or components.

To create a protected route in React Router, we can make use of the Route, Redirect, and render props. Here's an example of how we can implement a protected route:

const isAuthenticated = true;

const ProtectedRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        return isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        );
      }}
    />
  );
};

In this example, we create a ProtectedRoute component that accepts a component prop and other props using the spread operator (...rest). Within the render prop of Route, we check if the user is authenticated. If the user is authenticated, we render the provided component. Otherwise, we redirect the user to the login page using Redirect component.

By using the ProtectedRoute component in our application's routing configuration, we can easily protect certain routes that should only be accessible to authenticated users.

It's important to note that the isAuthenticated variable in this example is hardcoded for demonstration purposes. In a real-world application, you would typically use a state management solution or an authentication service to handle the authentication status.

In summary, React Router allows us to create protected routes by utilizing the Route, Redirect, and render props. By implementing protected routes, we can control access to certain pages or components based on authentication or authorization requirements.

```javascript
const isAuthenticated = true;

const ProtectedRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        return isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        );
      }}
    />
  );
};
```

What is the purpose of creating protected routes in React Router?

React Router Hooks

React Router provides a set of hooks that make it easier to access and manipulate route-related information within functional components. These hooks can be used to achieve various functionalities in a React Router application.

Here are some of the commonly used React Router hooks:

• useHistory: This hook gives access to the history object, which can be used to navigate programmatically.

• useLocation: This hook provides access to the current location object, which contains information about the current URL and route.

• useParams: This hook returns an object containing the dynamic parameters of the current route.

• useRouteMatch: This hook returns an object that contains information about how the current URL matches a specific route.

Let's take a look at some examples of how these hooks can be used:

// Import the necessary hooks from React Router
import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom';

// Usage of useHistory hook
const history = useHistory();

// Usage of useLocation hook
const location = useLocation();

// Usage of useParams hook
const params = useParams();

// Usage of useRouteMatch hook
const match = useRouteMatch();

These hooks allow us to access important information about the current route and perform various actions such as navigation, parsing route parameters, and matching routes.

By leveraging these hooks, we can build dynamic and powerful React Router applications in a concise and efficient manner.

```javascript
// Import the necessary hooks from React Router
import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom';

// Usage of useHistory hook
const history = useHistory();

// Usage of useLocation hook
const location = useLocation();

// Usage of useParams hook
const params = useParams();

// Usage of useRouteMatch hook
const match = useRouteMatch();

```

React Router provides a set of ________ that make it easier to access and manipulate route-related information within functional components.

Handling NotFound Routes

In a React Router application, it is common to provide a custom 404 page or handle routes that do not match any defined routes. This ensures that users are presented with a meaningful user interface even when they navigate to invalid or non-existent routes.

To handle NotFound routes, we can define a special Route component with the path set to '*' as the last route in our route configuration. This Route will be matched only when none of the other routes match. Inside this component, we can render a custom 404 page or redirect the user to a different route.

Here's an example of how we can handle NotFound routes:

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

const NotFound = () => {
  return (
    <div>
      <h1>404 - Page not found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/about' component={About} />
        <Route path='/contact' component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

True or false swipe question for Handling NotFound Routes

Code Splitting with React Router

Code splitting is a technique used to optimize the performance of a React application by splitting the JavaScript bundle into smaller chunks. With React Router, we can implement code splitting to load only the necessary components when a particular route is accessed.

React provides a built-in lazy function that allows us to dynamically import components. By using the lazy function, we can asynchronously load the required component only when it is needed.

Here's an example of how we can implement code splitting with React Router:

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

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

const Loading = () => {
  return (
    <div>Loading...</div>
  );
};

const App = () => {
  return (
    <Router>
      <Suspense fallback={<Loading />}> //SUSPENSE REMEMBER
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/about' component={About} />
          <Route path='/contact' component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
};

export default App;

In this example, we use the lazy function to import Home, About, and Contact components from separate files. These components will be dynamically loaded only when the corresponding routes are accessed.

The Suspense component allows us to define a fallback UI while the required component is loading. In this case, we render the Loading component until the component has finished loading.

By implementing code splitting with React Router, we can improve the initial loading time of our application and load only the necessary code for each route.

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

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

const Loading = () => {
  return (
    <div>Loading...</div>
  );
};

const App = () => {
  return (
    <Router>
      <Suspense fallback={<Loading />}> //SUSPENSE REMEMBER
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/about' component={About} />
          <Route path='/contact' component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
};

export default App;
```

What is the purpose of code splitting in a React application?

Server-Side Rendering with React Router

Server-side rendering (SSR) is a technique that allows us to render React components on the server and send the generated HTML to the client. This can improve the initial loading time of our application and provide better SEO results.

To implement SSR with React Router, we can use a server framework like Express and the StaticRouter from react-router-dom.

Here's an example of how we can implement SSR with React Router:

// Example of server-side rendering with React Router

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { StaticRouter } = require('react-router-dom');

const App = require('./App');

const server = express();

server.get('*', (req, res) => {
  const context = {};
  const app = ReactDOMServer.renderToString(
    React.createElement(
      StaticRouter,
      { location: req.url, context: context },
      React.createElement(App)
    )
  );

  if (context.url) {
    res.redirect(context.url);
  } else {
    res.send(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>Server Side Rendered App</title>
        </head>
        <body>
          <div id='app'>${app}</div>
          <script src='/bundle.js'></script>
        </body>
      </html>
    `);
  }
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
})

```javascript
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { StaticRouter } = require('react-router-dom');

const App = require('./App');

const server = express();

server.get('*', (req, res) => {
  const context = {};
  const app = ReactDOMServer.renderToString(
    React.createElement(
      StaticRouter,
      { location: req.url, context: context },
      React.createElement(App)
    )
  );

  if (context.url) {
    res.redirect(context.url);
  } else {
    res.send(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>Server Side Rendered App</title>
        </head>
        <body>
          <div id='app'>${app}</div>
          <script src='/bundle.js'></script>
        </body>
      </html>
    `);
  }
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
})
```

To implement ___________ with React Router, we can use a server framework like Express and the ______________ from react-router-dom.

Conclusion

Congratulations on completing the React Router tutorial! You have learned how to implement client-side routing in a React application, allowing for smooth navigation and enhanced user experience.

React Router is a powerful library that provides a declarative syntax for defining routes and managing navigation in a single-page application. By using React Router, you can easily create complex routing structures, handle dynamic routes, and secure protected routes.

As you continue your journey in frontend development, React Router will be a valuable tool in your toolbox.

To further enhance your knowledge and skills, here are some additional resources:

• React Router Documentation
• React Router GitHub Repository
• Official React Documentation
• Codecademy - Learn React
• Frontend Masters - Complete Intro to React, v6

Keep practicing and building projects to showcase your skills as a frontend engineer. Good luck!

React Router is a powerful library that provides a declarative syntax for defining routes and managing navigation in a single-page application. By using React Router, you can easily create complex routing structures, handle dynamic routes, and secure protected routes.

_____________ is a valuable tool in your frontend development toolbox.

Generating complete for this lesson!