I have a navbar and a Contact button in it. I would like to change this Contact button to a Back button based on the URL.
If the url is localhost:5000/ then let it be Contact, if the url is localhost:5000/about then it should be Back.
Is this possible? I'm not sure which syntax can do this.
{localhost:5000/ && <button>Contact</button>}
{localhost:5000/about && <button>Back</button>}
This is obviously incorrect, I just wonder if there is a similar approach.
If you are using v5.1 or onwards of react-router, you can opt to use the useLocation hook in functional components. This will be useful in determining which path the user is currently at - then you can assess whether to render "Back" or "Contact". I recommend using ternary operator for this.
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
If you are using a lower version of react-router or using a class based component, you can use withRouter. The logic will be very similar in that you will get access to your location object, but withRouter is a higher-order component
You need to use react-router for that(obviously you can do using window object). But react router is better:
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);
Note: You only withRouter if your component does not have access to react router props other wise it will work without it if it has access to location props
Assuming Navbar component has access to the router's props, you can do this:
// ./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;
If the React version you're using is 16.8 or higher, consider using 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;
