React `react-router-dom` 总是显示 `NotFound` 页面，主页活动 class 也没有被删除

Question

我在当前的应用程序中使用"react-router-dom": "^6.4.1" 。 我有 2 个问题。

1. 导航到其他页面时，未删除主页active class。 新页面和主页仍然具有active的 class 名称。

2. 我总是在NotFound页面。 即使当我点击其他页面时，我也在NotFound页面中。

任何人都可以帮助我了解我正在运行的问题吗？

方案 1 的代码：

{links.map(({ name, path }, index) => {
  return (
    <li key={index}>
      <NavLink
        onClick={() =>
          setIsNavShowing((prev) => !prev)
        }
        to={path}
        className={({ isActive }) =>
          isActive ? 'active-nav' : ''
        }
      >
        {name}
      </NavLink>
    </li>
  );
})}

情景 2：

const App: FC = () => {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="gallery" element={<Gallery />} />
        <Route path="home" element={<Home />} />
        <Route path="plans" element={<Plans />} />
        <Route path="trainers" element={<Trainers />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

链接数组：

export const links:TypeLink[] = [
  {
    name: "Home",
    path: '/'
  },
  {
    name: "About",
    path: '/about'
  },
  {
    name: "Gallery",
    path: '/gallery'
  },
  {
    name: "Plans",
    path: '/plans'
  },
  {
    name: "Trainers",
    path: '/trainers'
  },
  {
    name: "Contact",
    path: '/contact'
  }
]

Answer 1

可以通过指定end属性来解决活动的NavLink链接问题。

导航链接

declare function NavLink( props: NavLinkProps ): React.ReactElement; interface NavLinkProps extends Omit< LinkProps, "className" | "style" | "children" > { caseSensitive?: boolean; children?: | React.ReactNode | ((props: { isActive: boolean }) => React.ReactNode); className?: | string | ((props: { isActive: boolean; }) => string | undefined); end?: boolean; style?: | React.CSSProperties | ((props: { isActive: boolean; }) => React.CSSProperties); }

如果使用了end属性，它将确保该组件在其后代路径匹配时不会被匹配为“活动”。

{links.map(({ name, path }, index) => {
  return (
    <li key={index}>
      <NavLink
        onClick={() =>
          setIsNavShowing((prev) => !prev)
        }
        end // <-- specify end prop
        to={path}
        className={({ isActive }) => (isActive ? "active-nav" : "")}
      >
        {name}
      </NavLink>
    </li>
  );
})}

我在路由中看到的唯一问题是Home组件正在"/home"而不是"/"上呈现，就像链接链接到的那样。

<Routes>
  <Route path="about" element={<About />} />
  <Route path="contact" element={<Contact />} />
  <Route path="gallery" element={<Gallery />} />
  <Route path="/" element={<Home />} /> // <-- render on "/" instead of "/home"
  <Route path="plans" element={<Plans />} />
  <Route path="trainers" element={<Trainers />} />
  <Route path="*" element={<NotFound />} />
</Routes>