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.
Related
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 am using adminLTE tempate for my react js app. I am using react router Link to specified pathname with state like below.
<Link className="nav-link text-white" to={{pathname: "/calendar", state: groups: this.state.groups}}}>Calendar</Link>
Everything is working fine in the above code. But I need to add data-widget="pushmenu" for my sidebar to collapse in mobile devices.
If I use the below code
`<Link data-widget="pushmenu" className="nav-link text-white" to={{pathname: "/calendar", state: groups: this.state.groups}}}>Calendar</Link>`
pushmenu widget is working but the calendar componenent is not working. I used higher order like below which is also not working
<a data-widget="pushmenu">
<Link>Calendar</Link>
</a>
Please help me with this issue
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.
The mail link will do nothing, not even an error message. I have this problem and the only work around is to right click and open it in a new tab. Then the default mail client of the machine will open up with correct values.
The same anchor component with the link will work if it is not in a Dropdown component.
Sample code snippet is as below.
import { Dropdown } from 'react-bootstrap'
<Dropdown>
<ul>
<li> Some html component </li>
<li> Send Email </li>
</ul>
</Dropdown>
Any idea how I can overcome this ?
I am using angularjs for my web application and in this I have a navbar.
Now in navbar, I have different options and I am using ui-sref-active="active" to highlight the current option/state.
Lets say, I have four options - Home, Admin(with drop-down), features and settings(with drop-down). Now, if my home state is active and I click on admin option, then at the same time it shows both states active(i.e., both home and admin options are highlighted at the same time instead of one).
Sorry for errors and thanks in advance...
You can use ng-class for serving your purpuse.
you can apply below logic for your purpose.
<ul>
<li ng-class=setClass("home")>Home</li>
<li ng-class=setClass("Admin")>Admin</li>
<li ng-class=setClass("features")>features</li>
<li ng-class=setClass("settings")>settings</li>
</ul>
And in controller create setClass() function:
$scope.setclass=function(currentState){
if(currentState==$state.$current.name){
return 'active';
}
else{
return '';
}
};
This should work fine.I have used this logic for doing the same.