在React Router中，如何根据路由变化条件性地渲染两个组件或切换两个不同的视口（outlets）？

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 (
    <>
      
      
      
    <>
  );
}

export default Layout;

现在，当访问某个特定路由时，我想要根据条件渲染两个不同的组件，或者改变两个出口（outlets）。实现这一目标是否必须使用嵌套，或者有没有办法直接使用两个出口？

另外，我在NavLink的isActive属性上遇到了一个问题。我希望当路由处于激活状态时，一个div能够显示或可见。下面是我的NavLink代码：


    `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 未定义。我尝试在线搜索，但没有找到任何相关信息。

Johannes Schaub - litb · Answer

要访问isActive属性，请确保将NavLink组件放置在由BrowserRouter包裹的Routes组件内。
要确定URL，请使用如下所示的useLocation钩子：

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

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

  return (
    <>
      
      {pathname === '/outlet/' ?  : }
      
    
  );
}

Gishu · Answer

当特定路由被访问时，我希望能够根据条件渲染两个不同的组件，或者改变两个出口。

你可以在该特定路由上实现这一功能。在element属性上使用三元运算符来条件性地渲染组件。同时，每个布局路由一次只能渲染一个出口。

示例代码如下：


  ...
  }>
    ...
    
          : 
      }
    />
    ...
  
  ...

当然，你也可以将此逻辑抽象为一个组件。

const SomeComponent = () => {
  ...

  return someCondition
    ? 
    : ;
};

然后在路由中使用这个组件：


  ...
  }>
    ...
    } />
    ...
  
  ...

关于NavLink的isActive属性问题，我希望当路由处于激活状态时，某个div可见或显示。

NavLink组件的children属性也可以接受一个函数，类似于className（以及style）属性。


    `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 && (
    
  )}