在 React Js 中为链接添加 If 语句答案

【问题标题】：Add If statement to Link in React Js在 React Js 中为链接添加 If 语句
【发布时间】：2022-11-18 18:44:50
【问题描述】：

大家好，我有一个小问题我想在扩展中添加一个条件，它的工作方式如下：如果您在主页上，请转到相关部分但是如果我们在另一个页面上，比如用户页面，那么当我按下导航栏中的任何按钮时，它会带我到主页。

   <nav id="nav-menu-container">
      <ul className="nav-menu">
        <li className="menu-active"> <Link  className="navbar-brand" to='/'>Home</Link></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#services">Services</a></li>
       
        <li><a href="#team">Team</a></li>

        {sessionStorage.getItem("username")!== null?<>
        <li><Link className="navbar-brand" to='/Contract'>Contarcts</Link></li>
        <li><Link  className="navbar-brand" to='/Userprofile'>{sessionStorage.getItem('username')} </Link></li>
        <li><button className="logout" onClick={logout} >LOGOUT</button></li></>:<>

{/* add if Condition to the Link that directs the extension  */}

        <li><Link  className="navbar-brand" to='/Signup'>Signup</Link></li>
        <li><Link  className="navbar-brand" to='/Login'>Login</Link></li></>}
      </ul>
    </nav>

如果我在主页上，请转到特定部分，如果我不去主页那么简单。

【问题讨论】：

标签： javascript reactjs if-statement react-router react-link

【解决方案1】：

你可以使用这种方法：

import { useLocation } from 'react-router-dom';
function App() {
  let location = useLocation();

  return (
    <Link to={location.path.includes('/Contract')? "/home": "/Contract"}>Contarcts</Link>
  );
}

【讨论】：

【解决方案2】：

试试这个，这有点奇怪，但它可能有效。

尝试在 href 中的每个部分之前添加斜杠 (/)。

是这样的：

<li><a href="/#about">About Us</a></li>

所以如果你不在主页上，当你点击链接时你会回到主页。

【讨论】：