I have a react app, it uses react router dom. I built it and moved it to, say,
http://domain.tld/ the site works fine. I have two problems :
if I visit the app and then click on a pdf linked (which is just a real file on my server) react-router-dom somehow hijacks it, and shows me the 404 page I set up in react router
same goes if I try to access, for example, http://domain.tld/api/whatevs, it doesn't work either
in both case if I empty the cache, I can see my pdf, or the json result of my api then a js is injected, and a refresh gives me my 404 page.
How can I prevent react router to hijack everything ? I already have a mandatory apache rewrite to redirect in case files dont exist.
EDIT: as requested in a comment, here is how my routes are defined :
<BrowserRouter>
<div>
<Menu />
<Route path="/" exact component={Home}/>
<Route path="/pages/:page_name" component={Page}/>
<Footer />
</div>
</BrowserRouter>
I removed some routes, but the structure is intact.
EDIT2:
from what I gathered, in fact, the service worker 'hijacks' all my static server route, and that's suppose to be normal, so I'll just unregister it, but if I'm correct I can't do that unless I want my app to reload on each link, I'm still looking for a way to tell it : "pretty please, dont touch /api/, /assets/ etc"
EDIT3:
and this might just be what I need :
Setting service worker to exclude certain urls only
I'll try when I'm at work tomorrow
Related
Let me present my problem,
I have two subdomains in the same react SPA codebase, say abc.domain.com and xyz.domain.com
I've logically separated the Route block inside Routes for both subdomains.
This is my code at the root level
<BrowserRouter>
<div>
{isabcSubdomain() && <AbcSubDomainApp />}
{isxyzSubdomain() && <XyzSubDomainApp />}
</div>
</BrowserRouter>
Inside AbcSubDomainApp
<Routes>
<Route path="a" element={<A/>}/>
<Route path="b" element={<B/>}/>
</Routes>
Similarly, inside XyzSubDomainApp
<Routes>
<Route path="x" element={<X/>}/>
<Route path="y" element={<Y/>}/>
</Routes>
Now, I am at abc.domain.com/a and want to navigate to xyz.domain.com/x without any page reload, just with a button trigger (say), is there any way to achieve this?
This is not possible, but not only because it is not supported in React.
Each time a browser detects a change to a new domain (subdomains too), a request to a DNS server is triggered (it may be cached but the request is always made), and the browser will then treat the content as coming from a different source.
This happens for very good reasons.
If you were to suddenly switch domains without reloading, how would the browser know which site data to use?
If you switched domains without realizing, you might accidentally enter private information into the wrong website!
I recommend you do not pursue this functionality within your website. Having two copies of the exact same code on different websites is not a good solution.
I have a react app which does not render when zipped and loaded into facebook instant game platform. It generates logs such as below, that clearly show that the actions are firing. See the logs with Middleware ACTION-NAME below.
If someone can give me ideas on what could be going wrong, that would be great. Does JSX in an iframe need some special permissions to write to the #root tag?
I solved it thus,
I am using BrowserRouter in react for navigation. I had to change the route path I wanted to load initially from / to * .
- <Route exact path="/">
+ <Route exact path="*">
It seems like initially, when running the game inside the iframe, the route path did not match / .
I have a React Application and I wish to deploy this behind a load balancer, where the load balancer periodically pings the app to see whether it's healthy. My requirement is to provide a /health endpoint, that can be used for health checking.
What would be the ideal way to implement a health endpoint?
This is something that is required for anyone planning to deploy a React App in a auto-healing fashion
The main page of this App is /dashboard, which is a heavy page. Hence, it cannot be used as a health endpoint.
i.e: I have seen react apps which have /hello kind of endpoints which return a simple message like I am healthy.
I will be answering my own question. After some considerable amount of research and asking around from experienced React developers, the following is the used approach for Including a health endpoint in React Applications.
This requirement came up when containerising the React App to be used in a Kubernetes Environment.
Do NOT ever try to use an existing page as your health check endpoint. Because, your regular pages are heavy and healthcheck endpoints need to be simple.
Hence, create a new route with /health (or a preferable path) and return a simple HTML element. given below is a Simple Route component.
<Route path="/health">
<h3>Hey There!!! The App is Healthy</h3>
</Route>
This being used in a Routes.js file, is given below.
import React from 'react';
import { Switch, Redirect, Route } from 'react-router-dom';
const Routes = () => {
return (
<Switch>
{/* This endpoint will just return you to a dummy HTML with a simple heading tag */}
<Route path="/health">
<h3>Hey There!!! The App is Healthy</h3>
</Route>
{/* All other routes will be defined here */}
{/* Finally you will be redirected to a not found page */}
<Redirect to="/not-found" />
</Switch>
);
};
export default Routes;
The answer above will work but the health endpoint will contain all of the index.html content which is technically unnecessary for the health endpoint.
A much better approach is just adding a file called health in the public folder. Then, when /health is called, the service will return the content of the file, which is faster and much smaller.
I need to render a page for base url in react. I defined base url as,
<Router basename="/baseUrl">
<Switch>
<Route path={"/childUrl"}
</Switch>
</Router>
I am able to render page via /baseUrl/childUrl. When accessing, /baseUrl it redirects to /baseUrl/childUrl. How can I set a different page to /baseUrl
I know this is old, but in case anyone else stumbles upon this I would recommend using redux-first-router. It lets you dispatch actions either by changing the url in your browser, or the regular react way. This lets you control how components are rendered and keep the state of your application in sync with the url, without having multiple sources of truth.
Michael Sargent did a brilliant explanation, which can be found here.
And of course, you can also check out the git repo.
I understood that routing libraries for SPAs like https://github.com/ReactTraining/react-router help to parse the URL and put the app into a corresponding state of a state machine.
Is there more to routing than this?
Why is routing needed in the first place?
Why are URLs important? For example in a desktop app there are no URLs, so what's the big deal about them in a web app?
I also have this problem: "Why do we need routing?". You can write apps without routing at all. The code can get messy but still, it is not impossible.
My biggest reason for having routing is because if the user hits the Back button of the browser (Forward button as well, for that matter), he will not be navigating within the app. The user might expect to navigate within the app using the history of the different "pages" he loaded previously. Instead, he will be thrown out of the web app. Hitting the Refresh button would also throw him to the root of the app.
From the user's point of view, it is a regular web app (he doesn't need to know how it is designed: SPA or otherwise) and it should work as any web app/website should work. Routing ensures this, doesn't it?
This is a very good question, and one that I don't see discussed as often as I think it should be. The short answer is that often, in a Single Page Web Application, you don't need routing. If you are building an application which doesn't require its pages to be indexed by Google, and you either don't care, or don't want the user to be able to Bookmark pages, then there is no reason to implement routing.
In an SPA, routing adds additional complexity and effort, so if you can avoid doing it, you should. Of course, modern frameworks such as Angular and React provide facilities for making routing much easier, but even then some things can be hard to do with routing, for example animating between pages.
A good example of a web application where routing would be redundant would be a multi-page form which you want to control the user's passage through and possibly prevent them from returning to pages which have became inapplicable.
Implementing such a form with routes would be a nightmare as you would have to prevent the user from visiting certain pages in their history.
It's useful to ask yourself what a route actually is in a SPA. It's easy to think of it as just a 'web-page', but what it really is is a state, and when you navigate between routes what you are really doing is navigating between different states of the app. The fact that the appearance of the app may change between states is incidental to what is really going on. So what a route does is give the user a means of returning to particular states of the app.
You should only implement a route in an SPA when there is a state of the app which you want the user to be able to return to.
An alternative, and perhaps more useful way of doing this, would be to implement Undo and Redo mechanisms.
Of course, even when you don't have routes you still have to care about what happens when the user clicks the History Back button, but then you simply have a modal alert which warns them that they are about to leave the app should they proceed with the navigation.
In desktop applications you have buttons and other controls to get what you want. So routing in UI apps would be the set of all UI controls.
In web apps on the other hand, all functionality is accessed via some text which is the links and the parameters.
A URL is the path to access a functionality. Routing is like the mechanism to decide which functionality to call based on the provided URL and params.
So basically routing is a mapping between an URL and the functionality of a web server.
Routing in SPAs is used to load certain parts of the web app e.g. yourappurl.com/profile/userid/ will load the profile part of an SPA with the right user profile corresponding to the userid. This can be seen in the GitHub example you provided:
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="about" component={About}/>
<Route path="users" component={Users}>
<Route path="/user/:userId" component={User}/>
</Route>
<Route path="*" component={NoMatch}/>
</Route>
SPA refers to the fact that in general you have an index.html as your "main view" and then depending on the routing you add/remove certain parts from the index.html with frameworks like React or AngularJS etc.
I have the same question from time to time.
I would like to say router in SPA is a component hierarchy helper.
As #tech4242 pointed out, we don't have an something like segue in iOS. So what should we use to help users navigate if we don't use router? We are talking about SPA here. So we can manage this in store or state. Yes, that's feasible but not preferable.
Try to think this from the perspective of using a component-oriented library (either React or Vue). Using router help us use a certain component for a specific route. When users move back and forth between different route, we are relying on the route to tell what component to display. We simply couple a component with a specific route, which makes our root component (normally called App) clear, maintainable and readable. Without router, either the root component or state would be messy and hard to maintain.