Lecture 60 :- React Advanced - Class 2

In "React Advanced - Class 2," we'll continue exploring more advanced React concepts and build on what we learned in the previous class. We'll cover topics such as React Router advanced features, lazy loading, and code splitting.

Step 1: React Router - Code Splitting with React.lazy and Suspense

React.lazy is a function that allows you to dynamically load a component. It helps with code splitting by only loading the component when it's needed.

jsxCopy code

import React, { Suspense } from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; // Lazy load components const Home = React.lazy(() => import('./Home')); const About = React.lazy(() => import('./About')); function App() {  return (    <Router>      <div>        <h1>Hello, React!</h1>        <nav>          <ul>            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/about">About</Link>            </li>          </ul>        </nav>        <Suspense fallback={<div>Loading...</div>}>          <Route exact path="/" component={Home} />          <Route path="/about" component={About} />        </Suspense>      </div>    </Router>  ); } export default App;

In this example, the Home and About components are lazily loaded using React.lazy and wrapped in a Suspense component. The Suspense component displays the fallback content (e.g., "Loading...") while the lazy-loaded components are being loaded.

Step 2: Nested Routes with React Router

You can create nested routes by defining additional Route components inside a component.

jsxCopy code

import React, { Suspense } from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; const Home = React.lazy(() => import('./Home')); const About = React.lazy(() => import('./About')); const Products = React.lazy(() => import('./Products')); function App() {  return (    <Router>      <div>        <h1>Hello, React!</h1>        <nav>          <ul>            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/about">About</Link>            </li>            <li>              <Link to="/products">Products</Link>            </li>          </ul>        </nav>        <Suspense fallback={<div>Loading...</div>}>          <Route exact path="/" component={Home} />          <Route path="/about" component={About} />          <Route path="/products" component={Products} />        </Suspense>      </div>    </Router>  ); } export default App;

In this example, we added a new component Products and nested it within the Suspense component.

Step 3: Redirecting with React Router

React Router allows you to perform redirects with the Redirect component or the history object.

jsxCopy code

import React, { Suspense } from 'react'; import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom'; const Home = React.lazy(() => import('./Home')); const About = React.lazy(() => import('./About')); const Products = React.lazy(() => import('./Products')); function App() {  return (    <Router>      <div>        <h1>Hello, React!</h1>        <nav>          <ul>            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/about">About</Link>            </li>            <li>              <Link to="/products">Products</Link>            </li>          </ul>        </nav>        <Suspense fallback={<div>Loading...</div>}>          <Route exact path="/" component={Home} />          <Route path="/about" component={About} />          <Route path="/products" component={Products} />          {/* Redirect from /home to / */}          <Redirect from="/home" to="/" />        </Suspense>      </div>    </Router>  ); } export default App;

In this example, we added a redirect from /home to / using the Redirect component. Now, if the user visits /home, they will be redirected to the home page (/).

Step 4: React Router - URL Parameters

React Router allows you to capture URL parameters and pass them as props to the rendered component.

jsxCopy code

import React, { Suspense } from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; const UserProfile = React.lazy(() => import('./UserProfile')); function App() {  return (    <Router>      <div>        <h1>Hello, React!</h1>        <nav>          <ul>            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/user/123">User Profile</Link>            </li>          </ul>        </nav>        <Suspense fallback={<div>Loading...</div>}>          <Route exact path="/" component={Home} />          <Route path="/user/:userId" component={UserProfile} />        </Suspense>      </div>    </Router>  ); } export default App;

In this example, we added a route with a parameter :userId. The value of the parameter in the URL will be passed as the userId prop to the UserProfile component.

Step 5: Using React Router - Location and History

React Router provides access to the current location and history objects using the useLocation and useHistory hooks.

jsxCopy code

import React, { Suspense } from 'react'; import { BrowserRouter as Router, Route, Link, useLocation, useHistory } from 'react-router-dom'; const UserProfile = React.lazy(() => import('./UserProfile')); function App() {  const location = useLocation();  const history = useHistory();  const handleGoBack = () => {    history.goBack();  };  return (    <Router>      <div>        <h1>Hello, React!</h1>        <nav>          <ul>            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/user/123">User Profile</Link>            </li>          </ul>        </nav>        <Suspense fallback={<div>Loading...</div>}>          <Route exact path="/" component={Home} />          <Route path="/user/:userId" component={UserProfile} />        </Suspense>      </div>    </Router>  ); } export default App;

In this example, we use the useLocation and useHistory hooks to get the current location and history objects. We also added a handleGoBack function that uses history.goBack() to navigate back to the previous page.

Congratulations! You've completed the second class of React Advanced. You've learned about code splitting with React.lazy and Suspense, nested routes, redirects, handling URL parameters, and using location and history objects with React Router.

React and React Router offer powerful tools to build complex and performant applications. As you continue your React journey, you can explore more advanced topics like server-side rendering (SSR) with React, React context, error boundaries, and using advanced hooks like useReducer and useRef.

Keep practicing, building more complex applications, and exploring the vast possibilities of React and React Router! Happy coding!