如何使用react-router-dom实现重定向？<Redirect>组件失效求助

Hey Anita, let's break down why your redirect isn't working and get it sorted out—this is a super common hiccup with React Router, usually tied to version differences or misconfiguration.

First: Check Your React Router DOM Version #

React Router v5 and v6 handle redirects completely differently, so this is the first thing to confirm. Run this in your terminal to see which version you're using:

npm list react-router-dom
# or for Yarn
yarn list react-router-dom

If You're Using React Router v5 #

The <Redirect> component is valid here, but you might be hitting one of these common issues:

1. Missing leading slash in the to path
   Make sure your target path starts with / unless you're using relative routing in nested routes. For example:

   // ❌ Wrong (might not resolve correctly)
   <Redirect to='loginPage' />
   // ✅ Correct
   <Redirect to='/loginPage' />
   

2. Redirect isn't placed correctly in a <Switch>
   The <Switch> component renders the first matching route. If your <Redirect> is placed after a route that matches the current path, it won't run. Here's a proper example:

   import { Switch, Route, Redirect } from 'react-router-dom';
   
   function App() {
     const isLoggedIn = false; // Replace with your auth check logic
   
     return (
       <Switch>
         {/* Render login page when path matches */}
         <Route path="/loginPage" component={LoginPage} />
         {/* Redirect unauthenticated users from dashboard to login */}
         <Route path="/dashboard">
           {isLoggedIn ? <Dashboard /> : <Redirect to="/loginPage" />}
         </Route>
         {/* Catch all unmatched routes and redirect to login */}
         <Redirect to="/loginPage" />
       </Switch>
     );
   }
   

If You're Using React Router v6 #

The <Redirect> component was removed in v6—you'll need to use <Navigate> instead. This is probably why your redirect isn't working if you've upgraded recently.

1. Basic replacement for <Redirect>
   Use <Navigate to="/loginPage" replace />—the replace prop mimics the original <Redirect> behavior (it replaces the current entry in the history stack instead of adding a new one).

2. Example route configuration

   import { Routes, Route, Navigate } from 'react-router-dom';
   
   function App() {
     const isLoggedIn = false;
   
     return (
       <Routes>
         <Route path="/loginPage" element={<LoginPage />} />
         <Route 
           path="/dashboard" 
           element={isLoggedIn ? <Dashboard /> : <Navigate to="/loginPage" replace />} 
         />
         {/* Catch all unmatched routes */}
         <Route path="*" element={<Navigate to="/loginPage" replace />} />
       </Routes>
     );
   }
   

3. Triggering redirects from component logic
   If you need to redirect after an action (like a button click), use the useNavigate hook instead of component-based redirects:

   import { useNavigate } from 'react-router-dom';
   
   function ProfilePage() {
     const navigate = useNavigate();
   
     const handleLogout = () => {
       // Your logout logic here
       navigate('/loginPage', { replace: true });
     };
   
     return <button onClick={handleLogout}>Logout</button>;
   }
   

Quick Troubleshooting Checklist #

• Double-check that your target route (/loginPage) is defined in your route configuration.
• Ensure your redirect logic is only rendering when the condition is met (e.g., user is not authenticated).
• If using nested routes, confirm relative pathing is handled correctly (though absolute paths with / are safer for top-level redirects).

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