小编yab*_*ugh的帖子

浏览旧教程，React Router v5 似乎支持使用上下文 API 在不同路由之间共享状态，但我找不到 Router v6 的类似用法。

React Router v5 实现我正在尝试做的事情：

const [user, setUser] = useState(null);
 return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/">About</Link>
            </li>
          </ul>
        </nav>
        <UserContext.Provider value={user,setUser}>
          <Route path="/" exact component={Index} />
          <Route path="/about/" component={About} />
        </UserContext.Provider>
      </div>
    </Router>
  );

然后你可以使用useContext钩子访问状态

const {value, setValue} = useContext(UserContext);

v6 实施

当尝试将此实现与 v6 一起使用（将降级的 v5 组件替换为新的 v6 组件）时，您将遇到错误，因为您只能将<Route>组件作为路由器中的子组件。

是否可以跨 React Router V6 路由与全局上下文存储共享状态？

以下是我在 V6 实现上的尝试：

索引.js

import { BrowserRouter …

我有一个侧边栏组件，其列表项是在地图函数内部生成的（从 api 获取的电影类型）。我希望每种电影类型旁边都有一个不同的图标，但无法找到一种方法来为地图功能的每次运行创建不同的图标。

我的想法是第一：按照我希望显示的顺序制作一个我想要显示的图标的数组。

 const icons = [
    "AiOutlineHome ",
    "FaUserNinja",
    "GiSwordman",
    "GiBabyFace",
    "FaLaughBeam",
    "GiPistolGun",
    "GiPineTree",
    "GiDramaMasks",
    "GiFamilyHouse",
    "GiElfEar",
    "GiScrollUnfurled",
    "GiScreaming",
    "GiMusicalNotes",
    "GiMagnifyingGlass",
    "FaRegKissBeam",
    "GiMaterialsScience",
    "GiHalfDead",
    "GiGreatWarTank",
    "GiCowboyBoot",
  ];

然后在我的地图函数中为每个列表项生成不同的图标

{movieGenres.map((genre) => {
            return (
              <li key={genre.id} className="nav-text">
                <button
                  className="genre-btn"
                  onClick={() => genreSelectionHandler(genre.id)}
                >
                  *<GENERATE ICON HERE />*
                  <span className="nav-item-title">{genre.name}</span>
                </button>
              </li>
            );
          })}

是否可以务实地创建这样的组件？这样，如果我想要不同的图标，我可以避免单独创建每个列表项。