Menu
I have different react apps and its backend-service deployed independently inside the Openshift. There is one app among them where users login and navigate to othes apps using links provided in this app.
Presently, the link of each app points directly to the "Openshift Route" (similar to Kube Ingress) of the react app.
But, this for production regions we have to change the way it works. There is one public domain exposed, say, apps.mydomain.com. We should make the links of each on the apps in such a way that it is loaded by this path, apps.mydomain.com/reactapp1 should load reactapp1 & reactapp2 should be loaded in apps.mydomain.com/reactapp2 and so on.
So there is one Ingress configured configured with paths
rules:
- host: apps.mydomain.com
http:
paths:
- backend:
serviceName: home
servicePort: 8080
path: /
- backend:
serviceName: react-app-1
servicePort: 8080
path: /reactapp1
- backend:
serviceName: app-1-api
servicePort: 8080
path: /app1/api
- backend:
serviceName: react-app-2
servicePort: 8080
path: /reactapp2
- backend:
serviceName: app-2-api
servicePort: 8080
path: /app2/api
When I hit the url https://apps.mydomain.com it loads the home app, after login, on clicking the app links the apps doesn't load. Though I could see the browser title changed to the navigated app, I get this error Uncaught SyntaxError: Unexpected token <.
After lots of searches I find the react app should have to be configured differently if it needs to be deployed not from root.
What am I missing? Where am I doing wrong? Ingress or react app build? Can I have different Ingress with same domain but with different paths for each react-app & its backend api?
895
To redirect to another page on button click in React: Use the useNavigate() hook, e.g. const navigate = useNavigate(); . Call the navigate() function, passing it the path - navigate('/about') . The navigate() function lets us navigate programmatically.
Use the Navigate element to set a default route with redirect in React Router, e.g. <Route path="/" element={<Navigate to="/dashboard" />} /> . The Navigate element changes the current location when it is rendered. Copied!
React Router vs Conventional Routing: React Router is a library for React that provides routing functionality. It is different from conventional routing in a few ways. First, React Router is declarative. This means that you specify what you want your route to look like, rather than specifying how to get there.
So in a nutshell, the Link component is responsible for the transition from state to state (page to page), while the Route component is responsible to act as a switch to display certain components based on route state.
The index or the home, the about and the error page. The first thing you’d want to do when creating routing with the React router is to wrap the top-level app, in our case <TodoContainer> element in a router. Here, we introduced our first router component, BrowserRouter.
It is a third party library that allows us to seamlessly perform routing in React app. This routing can either be a client-side (in our case) or server-side rendering. React router, just like React has different but close implementations in the web environment and the native environment. Here, our focus is on the web app and not native.
Under Path-based routing, select Add multiple targets to create a path-based rule. For Path, type /images/ *. For Target name, type Images. For Backend target, select Images. Select Add to save the path rule and return to the Add a routing rule tab. Repeat to add another rule for Video.
Now to solve the NotMatch path, we will add a Switch. A Switch is another component from the react-router-dom that helps us render a UI. It wraps all your <Route> elements, looks through them and then renders the first child whose path matches the current URL.
You could use openshift routes instead of ingress for that, you can check on the docs how to apply it https://docs.openshift.com/container-platform/3.11/architecture/networking/routes.html#path-based-routes
One detail to pay attention if that your app will receive the relative path, it is not strip out of your request, for instance:
apps.mydomain.com/app2/api ---> app-2-api.svc:8080/app2/api
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
