AppLink component

This example uses a MemoryRouter to simulate a real app. A router component is required for the Link component to work. Click the links below to see the path change.

Current router path: /

Basic usage


  <AppLink to="/test">
    <Button type="button">This link is going to /test</Button>
  </AppLink>

** Note that the Link component is not applying any style to the button by default. It's just a wrapper around it to provide the link functionality. That means you can pass any component to it and style it as you want.

This composable approach makes it so the Link component will never interfere with any component's styling behavior, making them easily reusable and predictable without any headaches or conflicts. Use Link for functionnality, style the inside component itself.


  <AppLink to="/">
    <Button className="w-fit bg-green-700 hover:bg-red-400" type="button">
      This link is going to /
    </Button>
  </AppLink>

If you're only using text inside of the link, you can however use the className prop to style it.

going to /hello-world


<AppLink className="text-purple-500 border-2 border-purple-400 w-fit py-2 px-4" to="/hello-world">
  going to /hello-world
</AppLink>

AppNavLink

The AppNavLink component is used for navigation links that need to access the active/inactive state and apply styles or behaviors based on that. You can see the style of this link change as you click it or click the other links on the page.

This is a nav link going to /1 This is a nav link going to /2


<AppNavLink to="/meh" className="text-orange-500 bg-gray-200" activeClassName="bg-green-500">
  This is a nav link going to /1
</AppNavLink>
<AppNavLink to="/2" className="text-pink-500 bg-gray-200" activeClassName="bg-green-500">
  This is a nav link going to /2
</AppNavLink>

Text links

There is a special LinkTextStyled component you can use for inline text links. It exists to have our links styled consistently across the app.

This is a text example with the usage of the LinkTextStyled component.