Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Link, NavLink or useHistory?
Aastha Pandey
Aastha Pandey

Posted on • Edited on

     

Link, NavLink or useHistory?

I used to useNavLink instead of abutton more often because I didn't know how to link that button to a specific URL while usingreact-router,useHistory hook provided byreact-router can be used with abutton.

import{useHistory}from'react-router-dom'consthistory=useHistory();consthandleLogin=()=>{history.push('/homepage')}<buttononClick={handleLogin}>Login</button>
Enter fullscreen modeExit fullscreen mode

NavLink should be used with some kind ofnavigation bar as it will be helpful in showing which tab is active and at the same time will be able to take to some other linked URL.
And also if the navigation bar is visible to the user while navigating to other pages thenNavLink is a better choice.

import{NavLink}from'react-router-dom'<NavLinkto='/home'style={{background:'green'}}activeStyle={{background:'red'}}>Home</NavLink><NavLinkto='/about'style={{background:'green'}}activeStyle={{background:'red'}}>About</NavLink><NavLinkto='/dashboard'style={{background:'green'}}activeStyle={{background:'red'}}>Dashboard</NavLink>
Enter fullscreen modeExit fullscreen mode

Link too should be used with some kind ofnavigation bar but it will not be helpful in showing which tab is active without some extracss effort but the sole purpose of linking it to some URL will be served.
And also if the navigation bar is not visible to the user while navigating to other pages thenLink is a better choice.

import{Link}from'react-router-dom'<Linkto='/home'style={{background:'green'}>Home</Link><Linkto='/about'style={{background:'green'}}>About</Link><Linkto='/dashboard'style={{background:'green'}}>Dashboard</Link>
Enter fullscreen modeExit fullscreen mode

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
devcamila profile image
Camila Lacerda
  • Joined

Thank you!! Great content 👏😍

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I write only on those topics, wherein I myself was stuck at some point in time.
  • Work
    Front end developer
  • Joined

More fromAastha Pandey

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp