#React router dom style link code

This reference contains the function signatures and return types of the various interfaces in React Router. Instead we can simply use the NavLink provided by the React-Router.Д¬onclusion : This method is effective when you want to apply certain specific styling e.g when the link is currently selected and so on.React Router is a collection of React components, hooks and utilities that make it easy to build multi-page applications with React. Solution : Using NavLink, we can save time by not writing any JavaScript for triggering the current selection and applying corresponding styling. try removing the exact and see the effect for yourself So if the path is '/' then styling will ONLY be applied to the Home page. current and li tag to make a border-bottom to the corresponding link whenenver the path of the URL changes.Д®xact keyword is used so as to specifically target the currently selected URL. It would look something like this:ДЄctiveClassName is an attribute that we can use to create a class that we can later apply style to it.

#React router dom style link code

Anyway, let's jump into the code but beware there are some major changes here:Д®xplanation : So basically, NavLink is a special style of Link that we can add styles to it when it matches a certain path in the URL.So if I am currently in '/' i.e Home, I can apply a style border-bottom to the 'Home' link and if I am in '/about' path then apply style to 'About' link. Well, that a whole lot of Well's in one paragraph. NAVLINK is provided by REACT-ROUTER and NOT by STYLED-COMPONENTS. What's so special about it you may ask ? Well, it was built specifically for styling links you use with React-Router. React-Router has a module called NavLinks that we can use as a component. Well well well, this was the moment where I found something really interesting that led me to write this article. METHOD-3: Styling React-Router links using 'NavLinks' and 'activeClassNames'. Are you just noticing this now ? Greatttt ! What I meant by is that - in METHOD-1,we had to write textDecoration instead of text-decoration.

Solution : Now you can style your Link directly by creating another component instance i.e StyledLink, and then applying style to it.Д¬onclusion : This is a cleaner way than METHOD-1 because unlike in the earlier method, here we are actually writing CSS. The reason why we can use the latter one i.e component name, is because we have imported a component here that is Link, now we can pass this Link like this: styled together with 'tagNames' (e.g div or li or h1 etc) or a valid component name can be used to apply styles to a component. If you are familiar with styled components, you should know that styled is like the very basic thing you import from styled-components. METHOD 2: Styling links using 'ponentName' format. Here is a Codesandbox link if you are interesting in taking a quick glance at the code for METHOD-1 and if you wish you can follow along too. These basically are similar to how we use inline styles in HTML.So we create a style attribute with the styles inside it in an object form.Д¬onclusion : This is not so great way as it will become difficult to code out and track individual styles as the app scales - Also, it does not meet the standards of our Goals stated at the beginning of the article. Enter fullscreen mode Exit fullscreen mode