Javascript 当一条路由在Reaction路由中命中时，如何有条件地渲染两个组件或更改两个插座

当命中特定路由时，我希望有条件地呈现 两个不同的组件或更换两个插座.

你可以在那条特定的路由上做到这一点.使用三元运算符在elementprops 上有条件地渲染组件.此外，每条布局路由一次只能渲染一个插座.

示例:

<Routes>
  ...
  <Route element={<Layout />}>
    ...
    <Route
      path="/somePath"
      element={someCondition
        ? <ComponentA />
        : <ComponentB />
      }
    />
    ...
  </Route>
  ...
</Routes>

当然，您也可以将其抽象为组件.

const SomeComponent = () => {
  ...

  return someCondition
    ? <ComponentA />
    : <ComponentB />
};

<Routes>
  ...
  <Route element={<Layout />}>
    ...
    <Route path="/somePath" element={<SomeComponent />} />
    ...
  </Route>
  ...
</Routes>

我的NavLink号房里的isActive号房出了问题.我想要一辆 Div以在路由处于活动状态时可见或显示.

NavLink部件还可以起到与className(and 103)props 类似的childrenprops 的作用.

<NavLink
  to="/"
  onClick={handleHomeClick}
  className={({ isActive }) =>
    `block py-2 pr-4 pl-3 duration-200 ${isActive ? "text-orange-700" : "text-gray-700"} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
  }
  aria-current="page"
>
  HOME
  {({ isActive }) => isActive && (
    <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-2 h-2 mt-1 border-2 border-yellow-500 bg-black rotate-45" />
  )}
</NavLink>