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.
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
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}`}
>
I have three pages: Home, About, Testimonials. When I navigate to About or Testimonials and change my language from English to Korean (한국어), the page briefly translates the English text to Korean before re-rendering the entire page and returning me to my English home page. I'd like to be able to go to the English About page, click on 한국어 to translate the page from English to Korean and stay on the Korean About page.
How do I stop my page from re-rendering every time I change languages?
My codesandbox
<ul>
<li className="nav-languages">
<Link
className={
context.state.language === "en" ? "link-active" : "link"
}
onClick={context.changeLanguage}
data-language="en"
href="/#"
>
ENG
</Link>
</li>
<li className="nav-languages">
<Link
className={
context.state.language === "kr" ? "link-active" : "link"
}
onClick={context.changeLanguage}
data-language="kr"
href="/#"
>
한국어
</Link>
</li>
</ul>
This is in components/Header.js. Seemed to work fine after I made this change, that is converted to all anchor tags to <Link/>s. Just a workaround don't use it for production, but the correct solution should be somewhere around these lines.
Here is my solution.
In header.js, replace the anchors(ENG and 한국어) with Link and remove the href props.
anchor has the effect to reload the given href URL and we don't need it.
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 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/>