当React Router中的路由命中时，如何有条件地渲染两个组件或更改两个出口？

Question

我有一个 React 应用程序，我在其中使用 React Router。在我的布局组件中，我有这样的结构：

import React from 'react';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import { Outlet } from 'react-router-dom';

function Layout() {
  return (
    <>
      <Header />
      <Outlet />
      <Footer />
    </>
  );
}

export default Layout;

现在，当点击特定路线时，我想有条件地渲染两个不同的组件或更改两个出口。是否需要使用嵌套来实现这一点，或者有没有办法直接有两个出口？

此外，我在 NavLink 中面临 isActive 属性的问题。我希望 div 在路线处于活动状态时可见或显示。这是我的 NavLink 的代码：

<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 && (
    <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>

但这给出了错误 isActive 未定义，任何人都可以修复它吗

我尝试在网上搜索，但没有得到任何结果。

Answer 1

1. 要访问

   isActive

   属性，请确保将 NavLink 组件放置在由 BrowserRouter 包围的 Routes 组件内。

2. 要确定 URL，请使用

   useLocation

   钩子，如下所示：

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


function Layout() {
  const {pathname} = useLocation();

  return (
    <>
      <Header />
      {pathname === '/outle/' ? <Outlet/> : <OtherComponent/>}
      <Footer />
    </>
  )
}