My react site basically consists of two routes. The homepage and then a contact page. I am using react-router-dom to switch between the two routes. If I am on the Contact page how do I get the navbar to display "Close" instead of Contact.

CodePudding user response：

Assuming the navbar is a component of its own (if its not then just change the values), you could pass in a prop with different values from each of your pages, e.g a prop called currentPage and you could pass in "home" from the home route and "contact" from the contact route, and use the ternary operator in the navbar to decide which one to display. Something like props.currentPage == "home ? "Contact" : "Close". Hope this helps in some way.

CodePudding user response：

It's hard providing an answer without knowing your code structure.

react-router-dom offers multiple options that can benefit your goal. I'd suggest you first look into the match object and useRouteMatch hook or the location attribute in the route props and useLocation hook.