如何实现路由延迟渲染？点击<Link>后延迟2秒再渲染

Great question! When you want to delay rendering the target route after clicking a <Link> in react-router-dom, there are a few straightforward approaches—let's walk through them based on your exact needs:

1. Custom Delayed Link Component (Delay Route Navigation) #

If you want to hold off on navigating to the target route entirely for 2 seconds after clicking, you can wrap the default <Link> to intercept its click behavior:

import { Link, useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';

const DelayedLink = ({ to, delay = 2000, children, ...props }) => {
  const navigate = useNavigate();
  const [pendingTimer, setPendingTimer] = useState(null);

  const handleClick = (e) => {
    e.preventDefault(); // Block immediate navigation
    
    // Clear any existing timer if user clicks again before delay ends
    if (pendingTimer) clearTimeout(pendingTimer);
    
    const timer = setTimeout(() => {
      navigate(to);
    }, delay);
    setPendingTimer(timer);
  };

  // Clean up timer if component unmounts mid-delay
  useEffect(() => {
    return () => {
      if (pendingTimer) clearTimeout(pendingTimer);
    };
  }, [pendingTimer]);

  return (
    <Link to={to} onClick={handleClick} {...props}>
      {children}
    </Link>
  );
};

// Usage example
<DelayedLink to="/your-target-page">Go to Page (2s Delay)</DelayedLink>

This way, clicking the link won't trigger an immediate route change—instead, it waits 2 seconds before navigating, so the target page renders only after the delay.

2. Delay Content Rendering in the Target Component #

If you want the route to switch immediately but show a loading state for 2 seconds before rendering the actual page content, handle the delay inside the target component:

import { useState, useEffect } from 'react';

const TargetPage = () => {
  const [isContentReady, setIsContentReady] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsContentReady(true);
    }, 2000);

    // Clean up timer to avoid memory leaks
    return () => clearTimeout(timer);
  }, []);

  if (!isContentReady) {
    return <div>Loading... Please wait 2 seconds</div>;
  }

  return (
    <div>
      <h1>Your Target Page Content</h1>
      {/* Add all your page components here */}
    </div>
  );
};

// Route configuration (no changes needed here)
<Route path="/your-target-page" element={<TargetPage />} />

This approach gives users immediate feedback that the navigation happened, while still delaying the actual content render.

3. Global Navigation Guard (For v6.4+) #

If you need this delay to apply to specific routes across your app, use a global navigation hook with createBrowserRouter:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  { path: '/', element: <HomePage /> },
  { path: '/your-target-page', element: <TargetPage /> },
], {
  beforeNavigate({ to, preventDefault }) {
    // Only apply delay to your target route
    if (to.pathname === '/your-target-page') {
      preventDefault();
      setTimeout(() => {
        router.navigate(to);
      }, 2000);
    }
  },
});

function App() {
  return <RouterProvider router={router} />;
}

This is useful if you want centralized control over delayed navigation for certain routes.

内容的提问来源于stack exchange，提问作者davidlee