Ich habe eine Schaltfläche navbar und eine Schaltfläche Kontakt . Ich möchte diese Schaltfläche Kontakt in eine Schaltfläche Zurück basierend auf der URL ändern.

Wenn die URL localhost:5000/ lautet, lassen Sie sie Kontakt sein. Wenn die URL localhost:5000/about lautet, sollte sie Zurück sein.

Ist das möglich? Ich bin mir nicht sicher, welche Syntax dies kann.

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

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

Das ist offensichtlich falsch, ich frage mich nur, ob es einen ähnlichen Ansatz gibt.

0
David 19 Aug. 2020 im 11:27

3 Antworten

Beste Antwort

Wenn Sie v5.1 oder höher als react-router verwenden, können Sie die verwenden useLocation Funktionskomponenten einbinden. Dies ist hilfreich, um festzustellen, auf welchem ​​Pfad sich der Benutzer gerade befindet. Anschließend können Sie beurteilen, ob "Zurück" oder "Kontakt" gerendert werden soll. Ich empfehle hierfür die Verwendung eines ternären Operators.

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


Wenn Sie eine niedrigere Version von react-router oder eine klassenbasierte Komponente verwenden, können Sie {verwenden {X1}}. Die Logik ist insofern sehr ähnlich, als Sie Zugriff auf Ihr location Objekt erhalten, aber withRouter eine Komponente höherer Ordnung ist

1
95faf8e76605e973 19 Aug. 2020 im 08:48

Angenommen, die Navbar -Komponente hat Zugriff auf die Requisiten des Routers, können Sie Folgendes tun:

// ./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;

Wenn die von Ihnen verwendete React-Version 16.8 oder höher ist, sollten Sie Hooks verwenden:

// ./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;
1
Adam Azad 19 Aug. 2020 im 09:07

Sie müssen dafür React-Router verwenden (natürlich können Sie auch Fensterobjekte verwenden). Aber reagieren Router ist besser:

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);

Hinweis : Sie withRouter nur, wenn Ihre Komponente keinen Zugriff auf reagierende Router-Requisiten hat. Andernfalls funktioniert sie ohne sie, wenn sie Zugriff auf Standort-Requisiten hat

1
Shubham Verma 19 Aug. 2020 im 08:36