I'm working on a project and I have two components called home , about components.
When I'm on the home component and I'm going to the about component everything all right
but When I'm on the about component and Reload the page again error not found(404).
what?
The problem is, on your first load (at home component), client receive the whole ReactJS App and the routing from that point will be handled by ReactJS App (client routing). In your second case, you are at the about (component) and reload the app, the request send to the server like .../about and no route on server match it then it returns 404.
P/S: Follow along with Next official tutorial, you will face that case and they explain quite clear about it.
https://nextjs.org/learn/basics/getting-started
Related
I have made a back button for my isomorphic react application and am accessing the current URL of the page to check if my user is coming from the inside my application entry point or directly entering the URL for the subpage of my application into the browser. The thing is that if someone has hit my subpage URL directly then I redirect them to a default page otherwise I allow goBack functionality provided by withRouter HOC from React.
my code to handle Back button functionality looks like this
if(this.props.location===reactReferer.referer()){
this.props.history.push('/about')
else { this.props.history.goBack(); }}
what am I doing wrong as this doesn't seem to be working? I imported the following package and npm installed it 'react-referer'
I am serving a production build index.html of react from an Express server. The react app uses react router for navigating. When using react router, there is a problem that when refreshing the page, it can not get the data anymore because it is sending GET request to http://example.com/abc and that URL is not handled in express. So I found the solution by handling every get request: app.get('*') to redirect back to the home page so the page can get all the resources it need. However, I have other end points in express that can send data to the front-end and if I redirect all GET request that end points does not work anymore. How should I solve this ?
So I found the answer by moving the app.get('*') below any other GET end points
Ok, I have a project and in the past I made a koa SPA (using koa-static) because I needed it to run the page on heroku, the thing is that now I have react-router in my page and it works half fine. For example using the buttons that I have in the page that have the Link component (aka the component that react router uses to send the user to another route) works fine, and at the same time it changes the url, the thing that doesn't work is when I try to refresh the page/go back(for example if I was on route "/path" and now I am on "/" and I want to go back using the browser buttons it doesnt work)/introduce the url manually in the browser it doesnt work, koa just says Not found and that's because koa doesnt know that those paths are routes in the app rather than actual files/folders.
My question is, how can I make koa work with react router or how can I somehow make react router not change the paths in the url or idk something like that.
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've just implemented React Router 4 in my React/Redux app which was using multiple entry points up to this point.
I changed my code to have a single entry point and set up a catch-all route on the server side so that react router would handle requests on the client side.
Initially, everything seems to work OK but it takes a long long time before the right component is displayed. As soon as I click the link, I see the URL in the browser address bar change immediately but I have to wait sometimes more than 10-15 seconds before the right component is loaded.
I've also noticed that after a click or two, it stops working all together.
I don't get any errors and I put a break point on the server to see if I'm somehow hitting the backend when I click a link but looks like I'm not even going to the backend.
How can I debug/troubleshoot this? React Router is just a bunch of components and there's not much code to speak of that I can debug.
Has anyone experienced this issue? I'd appreciate any ideas you may have. Thanks.
The answer was in this post: React Router v4 not rendering components
Because I'm using Redux, I needed to use withRouter.