根据 URL 做出有条件的反应

Question

我里面有一个navbar和一个联系按钮。我想根据 URL将此“联系”按钮更改为“后退”按钮。

如果 url 是localhost:5000/那么就让它成为Contact，如果 url 那么localhost:5000/about它应该是Back。

这可能吗？我不确定哪种语法可以做到这一点。

{localhost:5000/ && <button>Contact</button>}

{localhost:5000/about && <button>Back</button>}

这显然是不正确的，我只是想知道是否有类似的方法。

Answer 1

如果您正在使用v5.1或更高版本react-router，您可以选择useLocation在功能组件中使用钩子。这对于确定用户当前所在的路径非常有用 - 然后您可以评估是否呈现“返回”或“联系”。我建议为此使用三元运算符。

import { Route, useLocation, Link } from "react-router-dom";

export default function App() {
  const location = useLocation();

  return (
    <>
      ...
      
      {location.pathname === "/" ? <Link to="/contact">Contact</Link> : <Link to="/">Back</Link>}<br/>

      ...
    </>
  );
}

CodeSandBox：https://codesandbox.io/s/infallible-williamson-489gl ?file=/src/App.js

如果您使用的是较低版本的组件react-router或使用基于类的组件，则可以使用withRouter. 逻辑非常相似，您将可以访问您的location对象，但withRouter它是一个高阶组件