React routing mode and programming implementation

React is a popular JavaScript library used for building user interfaces. When building a React application with multiple pages, we often need to use routing to manage navigation and state between different pages. React provides multiple routing modes to meet different needs. This article will introduce several common patterns of React routing and provide corresponding programming implementation examples.

1. Hash routing mode (HashRouter)
   The hash routing mode uses the hash mark (#) in the URL as the route identifier. In React, hash routing mode can be enabled using the HashRouter component. Here's a simple example:

import React from 'react';
import { HashRouter, Route, Link } from 'react-router-dom';

function App() {
  return (
    <HashRouter>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" component={