🚀 The “inactive” style feature was added into during React Router v6’s beta phase and shipped with the v6.0.0 stable release. One difference as of v6 is that activeClassName and activeStyle have been removed from NavLinkProps.
There are a few approaches for this, so let’s dive in! By default, an active class is added to aWe can also supply inactive classes for when the link is not active, perhaps to remove styles.
In our routing app, we have three routes which are home, /users, /contact Let’s style them using NavLink. But NavLink is used to add the style attributes to the active routes. 📣 You can also add active classes with React Router, the approach is similar so check it out!įrom here we can an active inline style, or multiple styles, based on the isActive value. The Link component is used to navigate the different routes on the site. Our component provides an isActive property that contains a boolean value, which is exposed to us through the className attribute when we pass in a function. Thankfully adding an inline style in React Router v6 proves nice and simple once we dive in.
✨ Written for React Router v6, check out my brand new React Router v6 course to fully master it. declare function NavLink( props: NavLinkProps ): React.ReactElement interface NavLinkProps extends Omit< LinkProps, className style children >. For example, when aReact Router provides the element for us to declaratively navigate around our applications, it renders an for us that points to a route.
0 kommentar(er)
