Reactjs 如何在我的React应用程序中添加单独的项目文件夹并将其保存在安全身份验证中

我正在与Google Firebase一起开发React web应用程序。 我还有一个项目是用简单的HTML和JavaScript完成的，我想用当前的React web应用程序来保护它。当用户登录到React应用程序时，他应该会看到该链接，如果用户单击该链接，HTML JavaScript应用程序将呈现并显示该链接。如果令牌过期，用户将被重定向回登录页面，他/她将无法停留在该HTML JavaScript文件夹中

这是我的导航路线

const Navigation = () => (
  <AuthUserContext.Consumer>
    {authUser =>
      authUser ? (
        <NavigationAuth authUser={authUser} />
      ) : (
          <NavigationNonAuth />
        )
    }
  </AuthUserContext.Consumer>
);

const NavigationAuth = ({ authUser }) => (
  <ul >
    <li>
      <NavLink to={ROUTES.HOME}>Home</NavLink>
    </li>
    <li>
      <NavLink to={ROUTES.ABOUT}>About</NavLink>
    </li>
    <li>
      <NavLink to={ROUTES.HTML_JS_Folder}>HTML project which I want to secure</NavLink>
    </li>
  </ul>
  );

const NavigationNonAuth = ({ authUser }) => (
  <ul >
    <li>
      <NavLink to={ROUTES.HOME}>Home</NavLink>
    </li>
    <li>
      <NavLink to={ROUTES.ABOUT}>About</NavLink>
    </li>
  </ul>
  );

const导航=（）=>(
{authUser=>
授权用户(
) : (
)
}
);
常量NavigationAuth=（{authUser}）=>(


家


关于


我想保护的HTML项目


);
常量NavigationNonAuth=（{authUser}）=>(


家


关于


);

我创建了路由，如您所见，NavigationAuth包含指向包含我要呈现的index.html文件的简单文件夹的链接