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.
Related
In my Next.js application, I'm having the well-known problem of being able to navigate via <Link> to dynamic routes, but when I refresh that page, I get a 404 error since the page was rendered client-side. The app is serverless, so a custom server isn't an option, and the paths I need can indeed be fetched from an API, but that API requires token authentication first so I can't populate the paths I need to pre-render with getStaticPaths either. This app is dynamic, and the pages I'm trying to access through dynamic routes use a lot of Client-Side Rendering anyways, so I don't have a problem with pushing rendering over to the client. I just need to know how to do that if that's the solution, and those two solutions (custom server and getStaticPaths) are the only two I've been able to find.
EDIT: I also use next export to deploy.
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 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 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