как отобразить подсписок только когда активен один из маршрутов внутри

Question

Я зациклил этот вложенный массив и хочу видеть подстраницы только при нажатии второй страницы.
Как я могу это сделать?

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/'
    }
  ];
}

Как можно нажать на вторую страницу, которая перенаправляет на subpage1 и стал активным?

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

Answer 1

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>

  )
}