React Router路由异常：首页持续显示/favorites组件内容的原因及解决

问题原因 #

1. 组件复用混淆：你在首页（/路径）的MappedCharacters组件中，将AddFavorites作为favoriteComponent属性传入，每个角色项都会渲染这个组件，导致首页出现AddFavorites里的<h2>Your Favorits are listed below</h2>内容。
2. 冗余的exact属性：React Router v6的Routes组件默认已经是精确匹配，不需要再添加exact属性，这个属性在v6中已被移除，写了也不会生效。

解决方案 #

步骤1：拆分/修改AddFavorites组件 #

将原组件拆分为两个功能：一个是收藏按钮（给角色列表用），一个是收藏列表页面（对应/favorites路径）。

先创建专门的收藏按钮组件：

// FavoriteButton.js
import React from 'react'

const FavoriteButton = (props) => {
  return (
    <div onClick={() => props.handleFavoritesClick(props.character)}>
      <span>⭐ 添加到收藏</span>
    </div>
  )
}
export default FavoriteButton

再修改AddFavorites作为收藏列表页面：

// AddFavorites.js
import React from 'react'

const AddFavorites = ({ favorites }) => {
  return (
    <div>
      <h2>你的收藏列表</h2>
      {favorites.length === 0 ? (
        <p>还没有收藏任何角色</p>
      ) : (
        favorites.map(character => (
          <div key={character.id}>
            <img src={character.image} alt={character.name} width="100" />
            <p>{character.name}</p>
          </div>
        ))
      )}
    </div>
  )
}
export default AddFavorites

步骤2：更新首页路由的渲染内容 #

在App.js中导入新的FavoriteButton，并替换首页路由里的favoriteComponent：

// 先导入组件
import FavoriteButton from "./components/FavoriteButton";

// 首页Route修改：
<Route
  path="/"
  element={(
    <>
      {characters.map((character) => (
        <MappedCharacters
          key={character.id} 
          name={character.name}
          gender={character.gender}
          status={character.status}
          species={character.species}
          image={character.image}
          favoriteComponent={FavoriteButton}
          handleFavoritesClick={addFavoriteCharacter}
          character={character} // 传递当前角色给按钮组件
        />
      ))}
    </>
  )}
/>

步骤3：传递收藏数据给列表页面 #

在/favorites路由中，将favorites状态传递给AddFavorites组件：

<Route path="/favorites" element={<AddFavorites favorites={favorites} />} />

步骤4：移除冗余的exact属性 #

所有Route组件上的exact属性都可以删掉，React Router v6的Routes默认精确匹配路径。

步骤5：调整MappedCharacters组件 #

确保MappedCharacters正确传递props给子组件：

// MappedCharacters.js示例
import React from 'react'

const MappedCharacters = ({
  name, gender, status, species, image,
  favoriteComponent: FavoriteButton,
  handleFavoritesClick,
  character
}) => {
  return (
    <div className="character-card">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p>性别：{gender}</p>
      <p>状态：{status}</p>
      <p>物种：{species}</p>
      {/* 渲染收藏按钮 */}
      <FavoriteButton 
        handleFavoritesClick={handleFavoritesClick}
        character={character}
      />
    </div>
  )
}
export default MappedCharacters

最终效果 #

• 访问/时，每个角色项显示收藏按钮，不会出现收藏列表的标题。
• 访问/favorites时，显示已收藏的角色列表。

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