How do I route my custom app to serve the expected rotues

Development - Développement App Development
1

Please I don’t know why my custom App is not serving the url I navigated to on landing on the page. The landing page is https://domain.com/api/apps/data-capture/index.html

I redirected it to the route / but it is not serving the page.

I got the following error on the server logs.

* INFO  2022-09-19T12:18:30,009 File /DHIS2_home/files/apps/data-capture-1.0.0/static/js/main.c9ccc3e5.js.map does not exist (LogOnceLogger.java [http-nio-8080-exec-8]) IDpK6GUEAXDfOi0QG9aIkxTsT5hQ+y+MiM4BUiHPpRjuc=

* INFO  2022-09-19T12:18:30,707 File /DHIS2_home/files/apps/data-capture-1.0.0/static/js/app.5a919846.chunk.js.map does not exist (LogOnceLogger.java [http-nio-8080-exec-5]) IDpK6GUEAXDfOi0QG9aIkxTsT5hQ+y+MiM4BUiHPpRjuc=

EDITED

Here is how I setup the route


                      <BrowserRouter>
                        <Routes>
                          <Route path="/" element={<Navigate to="/" />} />
                          <Route path="/" element={<LoginPage />} />
                          <Route path="/tabs" element={<LandingPage />} />
                          <Route path="/section" element={<SectionTable />} />
                        </Routes>
                      </BrowserRouter>

On landing on the app it loads the url https://domain.com/api/apps/data-capture/index.html and it doesn’t redirect to any page.

I can see that the index page and all other static assets load successfully but the page is blank.

1 Like
2

Hey @jetisco4u

Did you find a solution to this? Most of the time if a developer can’t reproduce the issue then they’d not be able to know what’s causing the error and thus it’d be difficult to find a solution.

Thanks!

3

@Gassim I am using React router v6 and React 18. I couldnt use the router as expected. So I opted for using the search path as a param. It is tough though to develop with this strategy as search param paths cannot reload state. So I have restricted myself to one page app.

1 Like
4

Have you tried this suggestion by @nnkogift:

From this post: Using react-router-dom to transition from one component to another

Without promising you that you will find the exact solution but you might be interested in checking out the other examples and uses where developers have used routes: Search results for '#development Route' - DHIS2 Community

5

The HashRouter was an alternative to search params. However, I was not sure if it enable force update of the state of the component. By the way I couldnt find in React router v6 where hashrouter is supported like it was in v5.

6

Okay I understand that these issues you are facing is because you opted to using the latest React and that’s causing some conflicts, right?

7

Yes and the latest React Router V6. The app platform is using an older version. Currently I am having a challenge working on my second app because I can find a way to force update the component using the search params since I can’t use the path router. So, I am putting everything on the same page which is making the file very large.

1 Like
8

Understood! I was facing big challenges when I was trying to start learning but then I gave up on using ‘latest’ versions and decided to only use ‘compatible’ versions.

9

Unfortunately I am a fan of latest versions of any tool or third party packages I use. Besides, the apps I am building is currently being used on our existing platform with the latest version of these tools. Transfering it to DHIS2 has been a pain though as I don’t want to step down the versions. But then I am still finding a way to make it work with the app platform.

1 Like
10

Great work, keep it up! :+1::+1:

1 Like