ReactJS应用刷新角色页面时重定向至首页的实现咨询

Hey there! Let's fix that annoying refresh crash on your characters page. Here are a couple of straightforward, reliable approaches using react-router-dom and Redux:

Approach 1: Handle Redirect in the Characters Component #

This keeps the logic tied directly to the component that needs it, making it easy to maintain.

1. Pull your character data from Redux using useSelector
2. Grab the navigation function with useNavigate
3. Add an effect that checks for existing data — if there's none, send the user back to the homepage

import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import CharactersList from './CharactersList'; // Your existing list component

const CharactersPage = () => {
  const characters = useSelector(state => state.characters.list);
  const navigate = useNavigate();

  useEffect(() => {
    // Redirect to home if no character data exists
    if (!characters || characters.length === 0) {
      navigate('/', { replace: true }); // Using replace prevents back button loops
    }
  }, [characters, navigate]);

  // Optional: Show loading state if data is still loading (if you add loading state to Redux)
  if (!characters) return <div>Loading...</div>;

  return (
    <div className="characters-page">
      <h1>Star Wars Characters</h1>
      <CharactersList characters={characters} />
    </div>
  );
};

export default CharactersPage;

Approach 2: Route-Level Validation #

If you prefer to manage routing logic in one place, you can add a check directly in your route configuration:

import { Routes, Route, Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import HomePage from './HomePage';
import CharactersPage from './CharactersPage';

const AppRoutes = () => {
  const characters = useSelector(state => state.characters.list);

  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route 
        path="/characters" 
        element={
          // Only render the characters page if data exists; otherwise redirect
          characters?.length > 0 ? (
            <CharactersPage />
          ) : (
            <Navigate to="/" replace />
          )
        } 
      />
    </Routes>
  );
};

export default AppRoutes;

Quick Tip for Redux Setup #

Make sure your Redux initial state for characters is set to an empty array ([]) instead of undefined — this makes your existence checks more consistent and avoids unexpected undefined errors.

Bonus Alternative (If You Want to Avoid Redirects) #

Instead of redirecting, you could have the Characters page fetch data on its own if none exists. This is more robust if users might directly navigate to /characters via URL:

// Inside CharactersPage component
import { useDispatch } from 'react-redux';
import { fetchCharacters } from '../redux/actions/characterActions';

// ...

const dispatch = useDispatch();

useEffect(() => {
  if (!characters || characters.length === 0) {
    dispatch(fetchCharacters());
  }
}, [characters, dispatch]);

But since your original request was to redirect on refresh, the first two approaches should fit your needs perfectly.

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