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.

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.

• javascript
• reactjs
• react-router

• Does this answer your question? react-router go back a page how do you configure history? – Dhruva-404 Commented Aug 19, 2020 at 8:41

3 Answers 3

If you are using v5.1 or onwards of react-router, you can opt to use the useLocation hook in functional ponents. This will be useful in determining which path the user is currently at - then you can assess whether to render "Back" or "Contact". I remend 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 ponent, 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 ponent

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 ponent does not have access to react router props other wise it will work without it if it has access to location props

Assuming Navbar ponent has access to the router's props, you can do this:

// ./ponents/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:

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