How to make your React page load on clicking a button with a <Link> element - reactjs

<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

Related

ReactJS Button not routing to another part of the website

Below I put a screenshot of some ReactJS code which are buttons that are linked to another part of my website.
I was wondering why this code was not working correctly when I click on it.
<Actions>
<PrimaryButton href="/about" css="">
Start Searching
</PrimaryButton>
<SecondaryButton href="/about">
Learn More
</SecondaryButton>
</Actions>
I tried the above solution and when I clicked the button, it did nothing.
You can use a tag to open an another page. You can use target _blank to open in a new tab or you can use _self to open the same tab.
<a className="your classname" target="_blank" rel="noopener noreferrer" href="/about"
Start Searching
/>

React router dom LINK concatunates

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}`}
>

$window.scrollTo specific section of a page after a $location.path redirect in angular

This link in the menu brings me to the dashboard. If I am on the dashboard and I click the link. The window scrolls to the section of the page I need it to go to. However, if I am on another page and I click this link it redirects but does not scroll to the specific section of the page. What can I do to get it to scroll when I am coming from another page other than the dashboard?
<li><a href ng-click="scrollToSection()" highlight=".content"><i class="fa fa-bell"></i>Click here</a></li>
$scope.scrollToSection = function(){
redirectServices.goToPage();
$window.scrollTo(0, 800);
}

Angular ui-sref-active="active" not working on refresh

I have the following link
<a data-ui-sref-active="active" data-ui-sref="contact" href="javascript:void(0)">
Contact
</a>
It shows as active when I go to that page by clicking the link.
But the active class gets removed when I refresh the page.
How can I maintain the active page state when the user refreshes the browser?

why next/link rendering twice? how to solve it?

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/>

Resources