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.
3 Antworten
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
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;
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