Question

我有一个navbar和一个联系按钮。我想根据网址将此 Contact （联系方式）按钮更改为 Back （返回）按钮。

如果网址为localhost:5000/，则将其设为 Contact 。如果网址为localhost:5000/about，则其应为返回。

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

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

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

这显然是错误的，我只是想知道是否有类似的方法。

Answer 1

假设Navbar组件可以访问路由器的道具，则可以执行以下操作：

// ./components/Navbar.js
import React from 'react';

function Navbar({ location }) {
 
   if (location.pathname === "/about") {
       return <button>Back</button>
   }

   return <button>Contact</button>;
   
}

export default Navbar;

如果您使用的React版本为16.8或更高，请考虑使用Hooks：

// ./components/Navbar.js
import React from 'react';
import { useLocation } from 'react-router-dom';

function Navbar({ location }) {

   let location = useLocation();
 
   if (location.pathname === "/about") {
       return <button>Back</button>
   }

   return <button>Contact</button>;
   
}

export default Navbar;

Answer 2

您需要为此使用react-router（显然，您可以使用window对象）。但是反应路由器更好：

import React from 'react';
import { withRouter } from "react-router";

const Navbar = ({ location }) => {
 
   if (location.pathname.includes("about")) {
      // you can check using equality also (location.pathname === "/about")
       return <button>Back</button>
   }

   return <button>Contact</button>;
   
}

export default withRouter(Navbar);

注意：只有您 withRouter ，如果您的组件无权对路由器道具做出反应，否则，如果它有权访问定位道具，它将不起作用

Answer 3

如果您使用的是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是一个高阶组件

根据URL反应条件

3 个答案: