Reactjs 如何仅在其中一条管线处于活动状态时渲染子列表

我循环了这个嵌套数组，只想在单击第二个页面时看到子页面。
我该怎么做

const pages: Page = {
  termsPage: [
    {
      name: 'First Page', path: '/one/two/'
    },
    {
      name: 'Second Page', path: '/three/four/', 
      routes: [
        {
          name: 'subpage1', path: '/sub1/'
        }, 
        {
          name: 'subpage2', path: '/sub2/'
        }
      ]
    },
    {
      name: 'Third Page', path: '/five/six/'
    },
    {
      name: 'Fourth Page', path: '/seven/eight/'
    },
    {
      name: 'Fives Page', path: '/nine/ten/'
    }
  ];
}

如何单击重定向到子页面1的第二页并激活

const navigation =() => {
  return (
    <div>
      {pages.termsPage.map((route, i) => {
         <>
           <Link to={route.path} key={i}>{route.name}</Link>

           {route.routes ? route.routes.map((route, i)=>{

              <Link to={route.path} key={i}>{route.name}</Link>

           })}

         </>

      })}

   </div>);
}

const导航=（）=>{
返回(
{pages.termsPage.map（（路由，i）=>{
{route.name}
{route.routes？route.routes.map（（route，i）=>{
{route.name}
})}
})}
);
}

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Link，Route，Switch，useParams，useRouteMatch}；
//仅当其中一条管线处于活动状态时渲染子列表？
导出默认函数App（）{
常量页={
术语：[
{name:'第一页'，路径：'/one/two'}，
{
名称：“第二页”，路径：“/three/four”，
路线：[
{name:'subpage1'，路径：'/sub1/'}，
{name:'subpage2'，路径：'/sub2/'}
]
},
{name:'第三页'，路径：'/five/six'}，
{name:'第四页'，路径：'/seven/seek'}，
{name:'五页'，路径：'/nine/ten'}
]
}
返回(

{pages.termsPage.map（（第页，i）=>(

{page.name}

))}

{pages.termsPage.map（（第页，i）=>{
返回(
);
})}
);
};
函数页（{Page}）{
const{url，path}=useRouteMatch（）；
返回(
{page.name}

{page.routes？page.routes.map（（p，i）=>）

{`${p.name}`}

))：null}

)
}
函数子页（）{
const{pageId}=useParams（）；
返回(
子页
页面ID:{pageId}

)
}

import React from 'react';
import { BrowserRouter as Router, Link, Route, Switch, useParams, useRouteMatch } from 'react-router-dom';

// To render the sublist only when one of the routes inside is active ?

export default function App() {
  const pages = {
    termsPage: [
      { name: 'First Page', path: '/one/two' },
      {
        name: 'Second Page', path: '/three/four',
        routes: [
          { name: 'subpage1', path: '/sub1/' },
          { name: 'subpage2', path: '/sub2/' }
        ]
      },
      { name: 'Third Page', path: '/five/six' },
      { name: 'Fourth Page', path: '/seven/eight' },
      { name: 'Fives Page', path: '/nine/ten' }
    ]
  }

  return(
    <Router>
      <div>
        <nav>
          <ul>
            {pages.termsPage.map( (page, i) => (
                <li key={i}>
                  <Link to={`${page.path}`}>{page.name}</Link>
                </li>
              ))}
          </ul>
        </nav>
        <Switch>
          {pages.termsPage.map((page, i) => {
            return (
              <Route key={i} path={`${page.path}/`}><Page page={page} /></Route>
            );
          })}

        </Switch>
      </div>
    </Router>
  );
};

function Page({page}) {
  const {url, path} = useRouteMatch();
  return (
    <div>
      <h3>{page.name}</h3>
      <ul>
      {page.routes ? page.routes.map( (p,i) => (        
        <li key={i}>
          <Link to={`${url}${p.path}`}>{`${p.name}`}</Link>
        </li>                 
      )) : null }     
      </ul>

      <Switch>
        <Route exact path={`${path}:pageId`}>
          <Subpage />
        </Route>
      </Switch>
    </div>   
  )
}

function Subpage() {
  const { pageId } = useParams();
  return (
    <div>
      <h4>Sub-page</h4>
      <p>Page ID: {pageId}</p>      
    </div>

  )
}