Assume I'm in some page that has so many interactable components and use useState hooks to handling component states. When I click the link on the navbar that route to current page I stay (same path) it look like nothing happens. I want to reset all states (hooks) like I just enter this page from somewhere else and also call getServerSideProps() function from the server again but I don't want to use window.location.reload() because it will reduce web performance. Is there any method possible?
Related
When I open /app/wa/638934e53d4211b0167378b1?c=6392418d966eaa4e1dbe9e7d route and put a button there that on click calls router.push("/app/wa/638934e53d4211b0167378b1?c=6392418d966eaa4e1dbe9e7d") (SAME ROUTE), nextjs rerenders everythings and make api calls for all the components e.g sidebar, layout, navbar.
My app is using Client side fetching.
Based on the slug in [...slug].tsx, useEffect is called.
I use router.query.slug to a access slug value
useEffect array contains [slug] but I even tried with empty array. It's like whole page is rerendering
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 private pages behind a login page, if you try to reach a page the first you'll face is a redirect to the Login page and once you're logged successfully you will be redirected to the page you ask for, for example.
https://example.com/one-of-the-private-pages
redirect to
https://example.com/login
then redirect to
https://example.com/one-of-the-private-pages
the redirect is with the navigate utils from Gatsby
All this Logic is working as expected but the problem is when I need query parameters
https://example.com/one-of-the-private-pages?param1='example'
In this case, the behavior is:
Redirect to the Login page
After login
navigate(https://example.com/one-of-the-private-pages?param1='example')
then I can see a blink in the page with the parameter and a hard refresh
Finally, my URL is:
https://example.com/one-of-the-private-pages
This only happens after building to production in development mode everything works as respected
Note: I try deleting all the content on the page actually only has a div and an h1 component.
Gatsby, extends from #reach/router (from React) so it follows the behavior of it. It's intended to use only for internal navigation and, by default, does not support hashed URLs nor parameters, as the docs points:
Neither <Link> nor navigate can be used for in-route navigation with a
hash or query parameter. If you need this behavior, you should either
use an anchor tag or import the #reach/router package—which Gatsby
already depends upon—to make use of its navigate function, like so:
That's why your page blinks before losing the parameters. Don't focus on the gatsby develop/gatsby build, they have different behaviors, treat and compile the code differently and, that doesn't mean that your code has something wrong and it has stopped working in one environment, it's just that Gatsby doesn't support it.
Said that, at this point, you have two options:
Use the #reach/router dependency directly, as the documentation suggests:
import { navigate } from '#reach/router';
...
onClick = () => {
navigate('#some-link');
// OR
navigate('?foo=bar');
}
Note the import { navigate } from '#reach/router'; (not from Gatsby)
Using window.location redirection to get the parameters (manipulate them as you wish) and redirect the user accordingly.
Additionally, try using partial routes instead of absolute ones, since the internal navigation works better in that scenario, like:
navigate(/one-of-the-private-pages?param1='example')
I just solve my problem, I was using the full URL to navigate
Wrong:
navigate(https://example.com/one-of-the-private-pages?param1='example')
Correct:
navigate(/one-of-the-private-pages?param1='example')
I have a spa that consists of a homepage, categories, about us and contact us.
They all take you to a different component except categories that should take me to a part of the homepage.
Is there a way how to do it with React-router or is there another way
to do it?
It is hard to give feedback without seeing your code.
But if I understood correctly, you want to navigate between the different components using React-Router.
You can import the Router, Switch and Route from React-Router and then in your toplevel-container component, you would create the different for each component, making the URL change based on each component, e.g. /about-us, /contact-us, etc.
If you want your categories to be part of your homepage, then you could create another inside Homepage component, where you want it displayed, if it's only rendered at a specific URL. If you want it displayed at all times, then make the link go to the /homepage URL, same as for the regular homepage component.
I have a nextjs app connected with redux (using withRedux) and my navigation is driven by a header, in which i use links for links to different parts of the page.
I'm implemented _app.js to set up the container, provider, withRedux and in the getInitialProps in _app.js i fetch a list of users by dispatching an action, and make the results available on the store.
it all works fine when i visit the home page, then i click on the link to the UserList. the dispatch call to load the users is done on getInitialProps in _app.js.
If i visit the route directly in the browser (localhost:3000/UserList) getInitialProps is not called and the UserList page is empty.
I don't know where to go from here, i've spent a day and a half.
Not sure if you are working with server, my case I am working with nextjs static site. In the NextJS documentation itself they mentioned
getInitialProps will only be executed on the client when
navigating to a different route via the Link component or using the
routing APIs
Means on server side getInitialProps is always called, but on client side navigating to URL directly doesn't work.
I am planning to use componentWillMount and Dynamic Import for the solution.
I will update if thing works.