When I click on the app icon in the remote instance it shows the url like below Page 1.
page-1 - https://mydomain.com/api/apps/landing-page-redirect/index.html
I need to navigate to another page-2 when a button is clicked
onClick => page-2
CURRENT EXPERIENCE
If I click the button the page will navigate to https://mydomain.com/page-2 and the app will break with some errors that some css files and js are not accessible.
Can I reference this app landing url as / in my app?
Hey,
I’d recommend moving these kind of posts that are related to app development to #development:app-development.
I am not 100% sure but I think you might find these two posts helpful:
@nnkogift shared great insights there.
Thank you! 
thanks. I was not sure of where to post it.
You’re welcome! Please let me know if the posts I shared are helpful or not?
Thank you!
Sure it is helpful. I am looking into it now especially the Using react-router-dom to transition from one component to another
I have some clue I want to try out.
Did what I think was ok and it works fine locally. But after upload, the remote instance is serving my static files at the end of the app url like https://mydomain.com/api/apps/landing-page-redirect/index.html/static/js/7518.b3db8f62.chunk.js
As such the app is throwing HTTP Status 404 – Not Found
The landing page works fine serving the url at https://mydomain.com/api/apps/landing-page-redirect/index.html
But when I click the button to redirect to page 2, it throws error.
@Gassim and @rithvik Here I noticed that when I first click the App icon and inspect the Network tab, the remote instance serve them at https://mydomain.com/api/apps/landing-page-redirect/static/js/7518.b3db8f62.chunk.js without the trailing index.html
But after I click the button on the page to another page, the system serve the static files at https://mydomain.com/api/apps/landing-page-redirect/index.html/static/js/7518.b3db8f62.chunk.js with the trailing index.html
In the link to the new page I only reference from the api to the app slug and append the new page slug like /api/apps/landing-page-redirect/overview
If you are using react-router-dom to develop your application, you would just use relative paths like
“/” , “/overview”, “/about” etc.
Also use useHistory hook if you want to navigate based on button click.
React will automatically take care to serve that particular page when you route to that particular url.
Thanks,
Rithvik
@rithvik thanks for the link. I use reacrouter-dom v6 which does not support useHistory. However, I have a custom BrowserRouter I create that baked in the Router, History and some other Navigation history. It works like the useHistory hook and I saw that I can navigate in the app to say /overview. But I was not sure what I will set as the base url in the remote server as the system append index.html.
I mean with custom app the url is like http://localhost:8080/api/apps/custom-app-name/index.html
The http://localhost:8080 is the baseUrl. In react router v6 or in my custom BrowserRouter if I want to navigate to overview I will simply reference /overview and the router will append the base url to http://localhost:8080/overview which is the current experience I am having. But the challenge is that when the user refresh the page it will try to load the full url which will be http://localhost:8080/api/apps/custom-app-name/index.html/overview. But because there is no route pointing to it, the user will get error 404. I also notice that my static asset was being served at the wrong address when I navigate. So the experience is not a nice one. The solution I am trying now is to combine Navigate api to reference the full expected url and catch any other url as a wildcard and redirect them to the landing page. The experiment is still a work in progress as at the time I am typing.