As a senior engineer with a strong background in Java backend development using Spring Boot and MySQL, you're well-versed in building robust and scalable web applications. Now, you're ready to learn React and make your applications more dynamic and interactive.

One important feature you'll need to master in React is routing. Routing allows you to navigate between different pages or views within a single-page application (SPA).

React Router is a popular library for routing in React applications. It provides declarative routing, allowing you to define your application's routes using a component-based approach.

To get started with React Router, you'll need to install it as a dependency in your project. You can do this by running the following command in your project's root directory:

1npm install react-router-dom

Once React Router is installed, you can import the necessary components and start defining your routes.

Here's an example of how you can set up routing in your React application:

1import React from 'react';
2import { BrowserRouter, Route, Switch } from 'react-router-dom';
3
4import HomePage from './components/HomePage';
5import AboutPage from './components/AboutPage';
6import NotFoundPage from './components/NotFoundPage';
7
8function App() {
9  return (
10    <BrowserRouter>
11      <Switch>
12        <Route exact path='/' component={HomePage} />
13        <Route path='/about' component={AboutPage} />
14        <Route component={NotFoundPage} />
15      </Switch>
16    </BrowserRouter>
17  );
18}
19
20export default App;

In this example, we're using the BrowserRouter component as the root component for our routing. Inside the Switch component, we define our routes using the Route component. The exact keyword ensures that the route is only matched if the path is an exact match.

React Router also provides several other components and features, such as dynamic routing, nested routes, route parameters, and query parameters. These features allow you to build complex routing logic to handle various use cases.

With React Router, you can create a seamless navigation experience for your users and enable them to easily move between different views or pages within your React application.

Now, it's your turn to practice setting up routing in a React application. Use the provided code example as a starting point and modify it to define routes for additional pages in your application.

Happy routing with React Router!

xxxxxxxxxx

import React from 'react';

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

​

import HomePage from './components/HomePage';

import AboutPage from './components/AboutPage';

import NotFoundPage from './components/NotFoundPage';

​

function App() {

  return (

    <BrowserRouter>

      <Switch>

        <Route exact path='/' component={HomePage} />

        <Route path='/about' component={AboutPage} />

        <Route component={NotFoundPage} />

      </Switch>

    </BrowserRouter>

  );

}

​

export default App;