仅当其中一个路由处于活动状态时才呈现子列表（路由）？

Question

i循环了此嵌套数组，我仅在单击第二页时才希望看到子页。我该怎么办？

 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

尝试一下，在渲染子路由时添加了另一项检查，以检查当前激活的路由是否与之相同

const Navigation = () => {
  const{ pathname } = useLocation();

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

或用于

const Navigation = withRouter(({ location }) => {
  const { pathname } = location;

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