在导航栏中突出显示活动链接，React

Question

这是问题的简单版本，而不是实际问题。 反应代码：

<Router>
   <Navbar/>
   <Routes>
       <Route path="/:genreId" element={<MovieList/>} />
   <Routes>
<Router>

这个问题是在导航栏中，我有几个按钮可以进入特定的类型。 我想突出显示导航栏中的活动按钮（当我单击“喜剧”时，“喜剧”按钮应该亮起）

一些解决方案

1. 如果我重新加载，状态 => 将无法工作
2. 会话存储=>如果我第一次访问网站，将无法工作
3. 使用 useParams Hook 提取参数 => 这将不起作用，因为参数“genreId”可用于 movieList 组件而不是导航栏
4. 从 window.location 中提取 => 不想这样做，因为它看起来太临时了

什么是正确的方法？

Answer 1

我建议＃3“使用 useParams Hook 提取参数 => 这将不起作用，因为参数“genreId”可用于 movieList 组件而不是导航栏”。不过，您是对的，这不起作用，因为

Navbar

组件呈现在 Routes 组件之外，并且无法访问当前匹配的路线。要解决此问题，您应该将

Navbar

组件移至

Routes

组件内部。为了完成这项工作，您将创建一个渲染 Navbar 组件的布局路由组件和一个用于嵌套路由的

Outlet

组件，以将其

element

属性渲染到其中。示例：

import { Outlet } from 'react-router-dom';

const Layout = () => (
  <>
    <Navbar />
    <Outlet />
  </>
);

然后将

MovieList

 路由渲染为布局路由的嵌套路由。

<Routes>
  <Route element={<Layout />}>
    <Route path="/:genreId" element={<MovieList />} />
  </Route>
</Routes>

Navbar

组件现在可以安全地访问

genreId

路由路径参数，并使用它来应用将按钮标记为“活动”所需的任何逻辑。这是一个简单的示例：

const genres = ["action", "comedy", "drama"];

const Navbar = () => {
  const navigate = useNavigate();
  const { genreId } = useParams();

  const navigateTo = (genreId) =>
    navigate(generatePath("/:genreId", { genreId }));

  return (
    <>
      {genres.map((genre) => (
        <button
          key={genre}
          className={["genreButton", genreId === genre && "active"]
            .filter(Boolean)
            .join(" ")}
          type="button"
          onClick={() => navigateTo(genre)}
        >
          {genre}
        </button>
      ))}
    </>
  );
};

我通常使用 IndexDB 来做这类事情。要完美管理 IndexDB，您可以使用 localforage。您可以查看此链接。

localforage

Answer 2

您可以使用 NavLink 代替 Link 来设计活动路线。这是

文档

Answer 3

    <Router>
       <Navbar/>
       <Routes>
           <Route path="/:genreId" element={<MovieList/>} />
       <Routes>
    <Router>

在导航栏组件中，您可以像这样编写以获得活动链接：

   <nav>
      <NavLink to="/:genreId">Genre Name</NavLink>
   </nav>

尝试将 

useLocation

Answer 4

react-router-dom

。 这有点类似于解决方案，“4.从 window.location 中提取 => 不想这样做，因为它看起来太临时”，但不是那么“临时”。