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
Related
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
I just can't seem to access URLs to the server or backend once my react-router has been loaded. I can curl the requests like so to https://produktivv.com/api/testme - the same goes if you access this link without visiting the home page.
Basically, as soon as React is loaded in to the browser, it handles all URLs from there on in. Have even set up a reverse proxy, still no luck. It's a React thing.
All is working with axios requests to the server, I just can't seem to access it from the browser.
I have multiple apps running in the same domain in Azure.
I added react project last week.
We have back office app separately running built using asp.net MVC.
we have react project now. When I load the react in the browser it works correctly.
let's say xxx.azurewesites.net/ will load react by default and xx.azurewebsites.net/backoffice/login.axpx will load another app.
If I type the URL to access the back office app the problem comes in, now react scripts in the browser cache picks up the URL and try to match with react router and loads no route match page. I'm unable to load the back-office app anymore if I hard reload the page it loads the BO App now. how can we handle this problem I want to access the BO App even the react is loaded in the browser. How to prevent the react from getting the URL. I want to skip react router and send the request to the server so that server will send the BO App page.
I had an issue that the react js app with browser history only working on normal. But after build with webpack, i had an issue with refresh or paste relative url. If i'm using hash history instead of browser history it works well. I used several methods, but i'm only getting the issue
Mostly says this is a problem of tomcat server not webpack; If any one know to solve this issue please give a valid answers.
Note: I don't wanna use hash history, it's ugly for urls
You should only use browser history if you have a backend server supporting your application with routes.
If you're using webpack-dev-server (or any other) on a fully client side app you should use hash history
If you're using react-router v4 they are both accessible by BrowserRouter and HashRouter components.
I am a meteor user and I want to know the difference between express and react router Dom. When I used meteor, I would render a component that contained the browser router and routes. But I am kind of confused why people are using express with react when they can use react router Dom. Is it a preference thing or is there benefits to one that the other does not have? Or am I just wrong and they are two separate things? Please explain the difference of the two and how they would be used differently.
Express
Express works on the server-side. Specifically, it runs on top of node.js
Express is a 'web application framework', and can handle routes, accept client requests, retrieve data from databases, prepare views and send back responses.
Note once again that all of that is on the server side.
React-router-dom
React-router-dom is a client side routing library.
You might be aware that in Single Page Applications, when a user navigates to a link, a request to the server is typically not sent. Instead, the client side router (like react-router-dom) interprets the request and show appropriate content (eg: a specific react component).
To answer your question why people use express with react could be
to serve your index.html and your bundle.js files, when a user first visits the site, (www.example.com)
to redirect the user to www.example.com when someone directly visits www.example.com/subpage, which is typically handled by react-router-dom on the client,
to serve static assets like icons and images on your page
as an API backend for getting data from the server, etc