React Router can load routes asynchronously via getComponent or getComponents and it is ok. But if user has slow internet connection i should show some page with loader and some text message like 'Please wait component is loading' and so on. How to configure that using getComponent?
Instead of getComponent, you should use component and provide it a component that shows a loading message by default, but once it has loaded a component it shows that component instead.
You can reference this github gist for an example. It was written for React Router v4, but the idea is the same. Instead of rendering null you would reference the spinner, loader message, etc.
Related
I trie to render a certain route if a token is valid , previously set when logging in , if not valid i redirect the user to the home page. But when i compile it kept showing a blank page. The registered token aims at protecting routes , so when user who was not logged in can't access the '/auth' endpoint.
Here is the code :
If there is a change in cookies, React would not be informed, hence your component will not be rendered to render the right Route. A React component only updates when its props or states changes, or the parent component renders it directly.
You can listen to cookies and set a state to notify React that cookies has changed.
I found another solution for this problem and it works fine actually.
Code :
I have the following case: I have a web page with antd tabs and I need to refresh each of these tabs separately in a service worker push event. When I use client.navigate() or client.openWindow() in the event listener the whole page is refreshed. I have found a solution with React Router to pass parameters in the url, but I don't like it because I don't want the url to change and also I need to pass further props to the page that are shared in both tabs. Also how can I manage to call a Route render or a component with props from the service worker file. I use React, Typescript and antd.
The structure is the following:
Main.tsx - page with Router Routes
service-worker.ts - service worker methods and functions
SomePage.tsx - page I need to refresh
Other pages components etc.
Solved...
After a little exploring I have used client.postMessage in the service worker and on the resulting page I used navigator.serviceWorker.addEventListener('message', (ev)) where I could get the data from the service worker and use it in my component for what I needed and more.
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
Im trying to do SSR to my React + Next.js application. I have a proble with rendering dynamic modules. In _app.js I'm loading data and put them to my redux-saga. This is working fine but my SSR does not works for that data, because Im trying to render component with redux data instead of component props.
SSR only works, when I do api call inside getInitialProps, and put those requests via getInitialProps to my component. This is weird behaviour for me but let it be. It works by this but now I got another problem.
All those data that is responsible for my content are also listed in page view source. WTF - why there are in html content. Also because of that my page source view is loading few minutes.
Is there any option to not put those props into page source view ?
I need to reload my page when I render certain component using react router. I need this because I need a JavaScript script to load again and detect a certain form tag with a particular id. If I don't reload the page, the script never detects the form's id. (This script makes some validation on the form).
If I go to the contact component from my home component (root) the script doesn't work (I can send the form with empty fields). But if I go to the contact component from home, and I reload the page, the script starts working.
This is the error I get when home is rendered and the script doesn't detect the form id:
form-submission-handler.js:162 Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLDocument.loaded (form-submission-handler.js:162)
And this is what is used to detect the id:
function loaded() {
console.log('contact form submission handler loaded successfully');
// bind to the submit event of our form
var form = document.getElementById('gform');
form.addEventListener("submit", handleFormSubmit, false);
};
document.addEventListener('DOMContentLoaded', loaded, false);
So, if I reload the page, form-submission-handler script can detect the form.
Here is a page where you can replicate what is happening. Just go to "Contacto" section, it's in the Navbar.
The form submission handler script is inside a script tag before the tag in my index.html file, where the app is rendered.
It is possible to reload page with react and react router. To reload, you would simply provide anchor link to the url with contacts, and when user clicks on that anchor, page with that url would be fetched again from the server (you do have to make sure that your server would respond to that url and return your react app)
However, people generally go to the lengths to prevent react apps from reloading, since on reload all state of your react app is lost. Also I can not think of any situation in which I actually needed to reload react app, especially not for something as ordinary as form validation and submission. So, while your need to reload might still be justified, there is strong indication that you are trying to use react in some rather strange way, and that your problem might be resolved by getting more used to react and its usual usage patterns.