react-router-dom Redirect无界面及路由回退控制问题求助

Let's break down your problem step by step and fix it!

First: Why your <Redirect> isn't working #

The <Redirect> you're returning in handleSubmit won't do anything at all. That's because handleSubmit is an event callback function, not a component's render method. React doesn't process JSX returned from event handlers—so this Redirect never gets rendered, and no navigation happens.

Fixing the redirect logic #

Instead of returning a Redirect component, you need to directly manipulate React Router's history object to trigger navigation. Here's how to do it:

1. Give your Login component access to history:
   Since you're using a class component, wrap it with the withRouter higher-order component. This injects the history object into your component's props:

   import { withRouter } from 'react-router-dom';
   // ... your existing Login component code
   
   // Wrap your connected component with withRouter
   export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login));
   

2. Use history.replace to navigate:
   Replace the line where you return <Redirect> with a call to history.replace. This will replace the current entry in the browser's history stack (the login page) with the admin home page—perfect for your requirement that users can't go back to login after signing in:

   handleSubmit = async event => {
     event.preventDefault();
     const user = { email: this.state.email, password: this.state.password };
     await this.props.dispatch(authActiokns.authenticate(user.email, user.password));
     // Navigate regardless of the API response, and replace the history entry
     this.props.history.replace("/adminHome");
   }
   

Handling browser back/forward buttons correctly #

To lock down the navigation flow (no back to login after sign-in, no forward to admin after logout), we'll refine your routing logic and handle logout properly:

1. Add proper route guards:
   Update your route component to redirect users based on their login state, no matter which URL they try to access:

   render() {
     const { loggedIn } = this.props;
     return (
       <div>
         <Header />
         <Switch>
           {/* Redirect logged-in users away from login page */}
           <Route exact path="/">
             {loggedIn ? <Redirect to="/adminHome" /> : <Login />}
           </Route>
           {/* Block unauthenticated users from admin home */}
           <Route path="/adminHome">
             {loggedIn ? <AdminHome /> : <Redirect to="/" />}
           </Route>
           {/* Catch all other routes and redirect appropriately */}
           <Route path="*">
             {loggedIn ? <Redirect to="/adminHome" /> : <Redirect to="/" />}
           </Route>
         </Switch>
         <Footer />
       </div>
     );
   }
   

2. Handle logout with history.replace:
   When users log out, use history.replace to navigate back to the login page. This replaces the admin home entry in the history stack, so clicking the forward button after logout won't take users back to the admin area:

   // Example logout handler in your Header or AdminHome component
   handleLogout = () => {
     this.props.dispatch(authActions.logout());
     this.props.history.replace("/");
   }
   

Why this works #

• history.replace modifies the current history entry instead of adding a new one. This removes the login page from the stack after sign-in, and removes the admin page after logout.
• The route guards ensure users can't access restricted pages (or the login page when authenticated) even if they type the URL directly.

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