I'm encountering a reload problem with ui-router.
My navbar links to a submitForm page:
<a ui-sref=".submitForm">
submitForm can also take parameters, if someone is trying to edit a previously created form. The navbar should always link to a no parameters version.
However, if I'm on a version with parameters, then the navbar just reloads the page with the same parameters.
Any idea why or how I can fix this? Thanks!
Related
I am working on a React project where I have created a AlertsTable component which renders a paginated table with a PaginatedButton component that has links to URLs with different pages for table. But those links only change URL in browser URL bar but views remain the same until I manually hit reload button of browser. I searched up a bit, one solution was that Link component in Pagina tedButton component should be between Router component. Plus, it was also suggested that only one Router should be there in whole App so does it mean i would then have to remove Router from App.js? Which I am sure would make matters worse? I have also used the withRouter as per suggestion to get query parameter in AlertsTable component, i have got query parameter value now but view is not being updated.
I have removed the original API server URL due to obvious reasons so code sandbox doesn't display anything, but once i replaced URL with original URL in componentDidMount method in ALertsTable, it works. So code is legit.
stripped down code here
I have a menu with links to different pages, but when I click on the link to the page I'm already on, literally nothing happens. I want the page to rerender as if the user clicked in from another page.
I've tried
navigate('/temp')
navigate(link, { replace: true })
but it's not working.
The short answer is that you can't refresh the same page using #reach/router (from React, and Gatsby extends from it). This is because the location is the same so for the internal routing, nothing changes hence the refresh is not forced.
The easiest way to achieve it is by using the old-fashioned window.location.reload(). This will refresh the full page, forcing the components to be rendered again.
You can follow this GitHub thread for further information. As you can see, it can be achieved by diving into history.pushState and in other tricky ways but it always ends in a headache, it's not recommended since it's not the purpose of the #reach/router if it thrives will be with multiple caveats.
For standard internal navigation between pages, use <Link> component rather than navigate.
While I was using Link in React Router and history.push method,
I realized I have used those two method without proper knowledge.
I have used Link tag makes user possible to go to another component, and used history.push to make back button available.
But hard to tell the difference except history method stacks a trace.
What is the difference between Link and history.push besides I have mentioned above and how to use them properly?
With the Link you can navigate to another "page" by wrapping it for example a button and do the redirect when clicking. Mostly this is what you probably want to do.
But in some cases you want to navigate to another "page" programatically. For example when something changes in your app that has nothing to do with clicking on a button or link.
So you can use history.push to change the url programmatically without the need to click on a button or a link.
I hope this clears it for you
I am using react-router-redux and would like to create a new custom NavLink or Link that preloads components for the hovered Link Route upon hover. I would be greatful for some help to point me into the right direction.
I have no idea how to accomplish mounting the component defined in the route without routing to it.
Basicly if I am at the root url of page and hover over a <Link to="/portfolio" /> I want the matched component defined in my routes to prefetch the data needed for this page so that when a user finally clicks the link the data would already be served.
I haven no issues creating a HOC to add eventlisteners to the Link's and then dispatch an action but I need help on how to mount the routes without actually routing to them.
react-loadable sounds like what you want.
https://www.npmjs.com/package/react-loadable
I need to change some URL variables without page reload, I have set the $routeParams's value but this doesn't change in the navigation bar.
Does someone can help me ?
I'm not aware of a pure angular way to do this, but Angular UI Router allows you to assign urls to states and when you transition between states, it will rewrite the URL without a page reload.