React Router > React Router Link Button

React Router Link Button

Let's create a shared LinkButton component that will automatically wrap a Button with a Link from react-router-dom. See LinkButton shown on the right. We have props to and children. to is passed to the Link, while children is used to render the children content inside the Button. See the usage in Home and Missions.

Example of the usage:

<LinkButton to="/missions/new"> New Mission </LinkButton>

Next, we'll circle back to the new missions page and add an input so users can start typing in their new mission.

Lesson 9/26

import Button from "./Button";
import { Link } from "react-router-dom";

const LinkButton = (props) => (
  <Link to={props.to}>
    {" "}
    <Button>{props.children}</Button>
  </Link>
);

export default LinkButton;

Open Sandbox