I have a problem with my react web app.
I have Multiple components : Home, Login, Header, Footer
I do a GET request in Header to retrieve categories from API and list it in the Header menu.
The problem is when i click on link (to go in Login or Home page), the request in Header is sent again because Header component is include in Home and in Login component.
Someone have a solution for that ?
Thanks in advance :)
check out using a router, such as React Router, to handle multiple pages without reloading layout stuff like your Header.
alternatively, you might want some caching to not hit the API every time your component renders
Related
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?
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 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.
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