I have a page inside pages so, if you go to direct URL then it will print console.log once and if you go there with then it is printing twice.
Why it is happening?
I want to perform some task once per page.
<Link route={href} href={href}>
<a href={href}>
page to redirect
</a>
</Link>
I already go through with this issue https://github.com/zeit/next.js/issues/253 but still I am not clear
I am using next-routes package for <Link>
<Link to={href} href={href}>
<a>
page to redirect
</a>
</Link>
remove href on <a /> and replace route to to on <Link/>
Related
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
</li>
I wrote this ,when i click on the button
the url is updated but the page is not loading ,i have to refresh the page to load in to the page i desired
and also I am using react-router-dom#5.2.0 to use Switch .
I need to load the site to the path that i specified as i click the button
I'm trying to create navigation between some categories while changing the link on click
I need to get this localhost/blog/category/:category1 it works for the first category selected but when I click again I get this localhost/blog/category/blog/category/:category2.
I'm using LINK for redirection
<Link
className="nav-link"
aria-current="page"
to={`blog/category/${item}`}
>
thank you
try this :
<Link
className="nav-link"
aria-current="page"
to={`/blog/category/${item}`}
>
As in title - how does activeClassName param work with react-router-dom Link component? What does it mean that some class is active? In docs we can find only:
The className a <Link> receives when its route is active. No active class by default.
But without explanation what the active route actually is.
Edit: okay, now, having understood this, I can see that I could guess this meaning of this phrase. But I still think that was quite confusing.
If the URL is same as the to of your Link, activeClassName will be assigned to your anchor tag. Suppose you have 3 tabs:
<Link to='/tab-1' activeClassName="red-text">Tab 1</Link>
<Link to='/tab-2' activeClassName="red-text">Tab 2</Link>
<Link to='/tab-3' activeClassName="red-text">Tab 3</Link>
If your current URL is site.com/tab-2, only tab 2 will have the red-text class name, other tabs will not have it.
The above code will render as below when the url is site.com/tab-2, so that Tab 2 will be highlighted.
<a href='/tab-1'>Tab 1</Link>
<a href='/tab-2' class="red-text">Tab 2</Link>
<a href='/tab-3' >Tab 3</Link>
Example here.
I am having trouble setting up my routing using 'react-router-dom'. The problem is if I use the NavLink class, the a tag is lost and bootstrap wont display the css behavior.
What i'd like to happen is figure out a way to get the classes working like a normal a tag. Even if I have the btn btn-outline-primary, having the NavLink will interfere with the css properties.
***edit: I found the problem. If I set all routes for testing purpose to="/", every link is going to be active. So, afterall, Bootstrap is working perfectly, just have to make sure to test it once all routes are set.
<li className="nav-item">
<NavLink to='/' className="btn btn-light mr-1" href="#">
<i class="fas fa-user"></i> Perfíl
</NavLink>
</li>
try nesting the li in the Navlinks and also pass the bootstrap classes to the li and not the Navlink route. remove the href
i have used react router doms' Link:
<Link target="_blank" to={"www.mylink.com"} >mylink </Link>
but this would open new tab to http://localhost:3000/www.mylink.com
also, using a href:
<a href={'www.mylink.com'} target="_blank" > mylink </a>
does the same. opens new tab to http://localhost:3000/www.mylink.com
how do i open in new tab only the link?
try this
<Link target="_blank" to={"//www.mylink.com"} >mylink </Link>
or this
<a href={'//www.mylink.com'} target="_blank" > mylink </a>
for more reference:
Absolute vs relative URLs
https://en.wikipedia.org/wiki/Uniform_Resource_Identifier#Generic_syntax
I tried to use Link but I had the same problem. Now I'm using this
onClick={() => { window.open('LINK','_blank')}}
When I used Link like
<Link to={`//${isHrefVlaue}`}></Link>
this was opening without localhost, but it was missing the colon in https and not working as expected.
But then it worked after I replaced Link with an anchor like
<a href={isHrefVlaue}></a>