JSX Syntax and React Router Route Component Construction

JSX (JavaScript XML) is a syntax sugar in the React framework used for building components, allowing developers to write JavaScript code with structures similar to HTML. Its core characteristics include:

• Componentization: Decomposes complex logic into independent components to improve maintainability
• Nested Structures: Supports hierarchical organization of parent and child components
• Syntax Sugar: Achieves compatibility with HTML through simplified syntax (e.g., <div>Hello</div>)

React Router Introduction

React Router is an official routing solution provided by React, which implements navigation between pages by splitting the application into multiple route components. Its core concepts include:

• Route Configuration: Manages routes using <BrowserRouter> or <HashRouter>
• Route Components: Defines route rules via <Route>, rendering corresponding components after matching paths
• Route Parameters: Passes dynamic parameters through the params attribute of <Route>

Route Component Construction

In React Router, constructing route components requires combining JSX syntax. For example:

• Basic Routes:

  import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <div>
          <Link to="/">Home</Link> · <Link to="/about">About</Link>
          <Route path="/about" component={About} />
        </div>
      </Router>
    );
  }
  

  In this example, the component attribute of <Route> specifies the component corresponding to the route; after matching the path /about, the About component is rendered.
• Dynamic Routes:

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

  The : symbol defines dynamic route parameters id, which are retrieved in the component via useParams():

  function User({ params }) {
    return <div>User ID: {params.id}</div>;
  }
  

• Nested Routes:

  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/dashboard/posts" element={<Posts />} />
  

  Sub-route components are nested and rendered via the element attribute, achieving hierarchical navigation.
• Nested Navigation:

  <Route path="/products" element={<ProductList />}>
    <Route path="details/:id" element={<ProductDetails />} />
  </Route>
  

  Sub-routes are wrapped with element to ensure parent component lifecycle hooks (such as useEffect) trigger correctly.
• Route Parameters:

  <Route path="/users/:id/edit" element={<EditUser />} />
  

  Dynamic parameters are retrieved via params.id, which can be used directly in the component:

  function EditUser({ params }) {
    return <div>Edit User ID: {params.id}</div>;
  }
  

Lifecycle of Route Components

React Router route components must follow component lifecycle rules:

• Loading: The useEffect hook is used to initialize data or execute side effects
• Unmounting: The unmounted callback of useEffect handles resource cleanup
• Navigation: The useNavigate hook listens for route changes and updates page state

Practical Example

Construct a routing structure for a blog application:

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

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> · <Link to="/posts">Posts</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/posts" element={<Posts />} />
        <Route path="/posts/:id" element={<Post />} />
      </Routes>
    </Router>
  );
}

This structure wraps multiple Routes with Routes to achieve multi-level route management, while using element to ensure the independence of route components.

Summary

The combination of JSX syntax and React Router makes route component construction more flexible and efficient. Through dynamic routes, nested routes, and parameter passing, developers can organize complex page structures. The key lies in understanding route rules and component lifecycles to ensure routing behavior meets expectations.