In the front-end development, when the background data has not returned to the foreground, the page is refreshed and the latter route jumps. How should this problem be solved?
This is the case when you are calling a backend API from frontend, and you don't know when you will recieve the response.In that case you show the user spinner before redirecting to the next page which depends on the API response.
You should conditionally render the component which requires the data from your api as props.
Once you receive the data from the API you can update the state of hasReceivedData to true.
hasReceivedData ? <Component> : '<Spinner>'
Related
I am running into a very sporadic issue. It doesn't happen often but, in our React application, history.push(URL) does not always work as intended.
Typically, history.push will be handled by the React UI to navigate between React routes - it won't send an actual page request for whatever the URL is. 99% of the time this works perfectly fine - however, we are seeing cases in which history.push(URL) is actually sending PAGE REQUESTS to the server. This results in a 404 Not Found error.
Here is the code snippet:
this.props.history.push(`/live?watchNow=true`)
In what scenario should this actually happen?
You are changing the UI to /live route. Since React is a SPA (in case you do not use Server Side Rendering), it won't make a request for a new page to the server. But if you refresh the page with /live?watchNow=true, you browser will make a request to ressource/live?watchNow=true with parameter watchNow, nevertheless it should show up.
By the way push from useHistory do not make HTTP request (Docs), so check elsewhere.
So I have the a dynamic route lets say it is "exercise/[id]/". When this route is accessed I take that id from the url like this:
const router = useRouter()
const id = router.query.id
Then I run a SWR fetch (client side fetching) hook to fetch some data from the server with the provided id.
If the user types an id that doesn't exist in the server or if they typed an invalid id like some letters and characters, what's the right way to handle this situation? And is there a way to redirect the user to the default next's 404 page?
What you are describing is not possible in a purely client-side rendered environment.
If you are getting data from the URL, you should be able to server-side render the page and return a 404 before the page ever gets client-side rendered.
If SSR isn't an option, you have to return an entirely different component client-side based on the SWR output. At that point you're not returning a true 404 (as far as the network status code) and would just be rendering a different component based on your API's output.
https://nextjs.org/docs/api-reference/data-fetching/get-static-props#getstaticprops-return-values
If you CANNOT server-side render, then you would have to conditionally render a different component/set of components based on the SWR output. That is entirely dependent on how your code is set up, and even that would not be a true 404 if that matters to you.
My app makes a get request when the user navigates to a profile page, and there are params in the url to request the data. Should this data be stored in Redux, or is it better to make the request within the component and save it in React state? I am generally not persisting the data anywhere else in the app once a user has viewed the page.
For example, if I have page called home.
When a user logs in, he will see his avatar on the navigation bar.
If a user does not log in, he can see a log in button on the navigation bar.
I use Redux to manage state, and React Router to do the routing.
My problem is, on the server side, how to know which view to render.
You can create sessions and maintain the state in react accordingly. For every page request you can check that if the sessionid is present in the request headers. Then check wether it is the correct session id on the server side and return true value or thatever you want to return. And then maintain the sate accordingly. Now as you have got the state so you can render whatever you want to render.
I have only started with react and redux and designed the login -sign up page.
Have an action that calls login-sign up API and a corresponding reducer.
I display some of this information on page and use it on some others. Now, I would like this state to be maintained when the browser is reloaded. How do I do it?
I have this header component binding this action that logs the user in.
Usually, you either store the state in localStorage, e.g. by using redux-persist or fetch the initial state from your server.