How to link to routes from components?

Q: How to link to routes from components?

import { NavLink, Link } from "react-router"; function Header() { return ( {/* NavLink makes it easy to show active states */} isActive ? "active" : "" } > Home Concerts ); }

Difficulty: 4/10

react-router, programmatic navigation, link component

javascript

Scenario Questions

0-2 years experience

1You have a component that renders a list of products. How would you make each product name navigate to its detail page when clicked?
2If you use the <Link> component but forget to wrap your app with a router, what error will you see and why?

2-5 years experience

1We need to add a 'Back' button that returns the user to the previous page, but sometimes the user lands directly on the page via an external link. How would you implement this navigation safely?

Follow-up Questions

What would you do if you needed to pass data to the target route without putting it in the URL?
How does React Router prevent a full page reload when using <Link>?
Can you describe a scenario where you’d prefer navigate over <Link>?