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}`}
>
Related
I've created a component that outputs a navigation menu.
I'm calling this component from within another component that outputs a website header.
export default function HeaderNav() {
return(
<nav className={styles.headerNav}>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/tests/test001">Test 1</Link>
</li>
<li>
<Link to="/tests/test002">Test 2</Link>
</li>
<li>
<Link to="/tests/test003">Test 3</Link>
</li>
</ul>
</nav>
)
}
I've found that React is wrapping my navigation component in a parent div:
https://imgur.com/a/7gXEJ1F
The addition of this wrapping div creates problems for styling. Especially when it comes to layout for the header.
Ideally I'd like to additional wrapper to not exist. But if there's no way to prevent it from existing, then giving it a classname might help to reduce the issues for styling it.
How can I do either of these things?
Enclose your navigation component between <React.Fragment></React.Fragment> or with shorthand <></>. To further read about React.Fragment
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.
<ul>
<li>
<Link to={'/home'}>
Home
</Link>
</li>
<li>
<Link to={'/story'}>
About us
</Link>
</li>
</ul>
I have above navigation tab in reactjs and I would like to toggle active class on click between links. I have been go through on various stacks but not able to find proper answer for above scenerio.
One can use react-router/web#NavLink instead react-router/web#Link.
Attach the class that you want to use as a active class using activeClassName property of NavLink.
<ul>
<li>
<NavLinkto={'/home'} activeClassName="selected">Home</NavLink>
</li>
<li>
<NavLinkto={'/story'} activeClassName="selectedSec">About us</NavLink>
</li>
</ul>
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>
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/>