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?
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
@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.