Routing not working when creating ui5 application using ui5-webcomponents-react

Question

I am creating one react app based ui5-webcomponents-react, and deploying it to the SAP BTP. Each time the app is directly loading the index.html. I am not sure how to use the react-router in this app.

Files

approuter -> xs-app.json

{
 "welcomeFile": "todoapp/"
}

public -> xs-app.json

{
  "welcomeFile": "index.html",
  "authenticationMethod": "route",
  "logout": {
     "logoutEndpoint": "/do/logout"
   },
  "routes": [
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
   ]
}

index.js

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<ThemeProvider>
    <BrowserRouter>
       <App />
    </BrowserRouter>
</ThemeProvider>
);

I have added the routes in the App.js

 /*Removed unnecessary code for clarity*/
 return(
    <Routes>
        <Route path="/" element={<Worklist/>}/>
        <Route path="/detail" element={<Detail/>}/>
    </Routes>
 )

Worklist.js

 /*Removed unnecessary code for clarity*/
 return(
    <div>Worklist</div>
 )

The initial div element (Worklist component) is not showing on the index.html page. And I have doubts about how to navigate to another page, and how the URL might look.

Are you rendering a router in the app somewhere? Are there any errors in the terminal or console? — Drew Reese
– Drew Reese, Commented Nov 15, 2022 at 4:00
There needs to be a router rendered somewhere in the app so the Routes and Route components have a routing context available to them. Please edit the post to include all relevant code you are working with and have an issue using. See minimal reproducible example. Please do try to also clarify in more detail what exactly the issue is, what isn't working, any errors, etc. — Drew Reese
– Drew Reese, Commented Nov 15, 2022 at 5:14

Etrusko · Accepted Answer · 2023-07-11 12:46:40Z

1

To overcome this problem I used basename inside BrowserRouter, so the urls will be xxxx/index.html or xxxx/index.html/foobar.
I used this solution cause if you change "welcomeFile": "index.html" to "welcomeFile": "" it doesn't recognize the app.
It's probably not the prettiest solution but it's certainly the fastest and most effective for a React app inside SAP environment.
So, to use an easy router (React-Router v6), the code will be like this:

// example_complete_url = https://xxx.eu10.hana.ondemand.com/my-sap-deployed-app-url/index.html
const base_url = "/my-sap-deployed-app-url/index.html";

<BrowserRouter basename={base_url}>
    <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/foobar" element={<Foobar />} />
        <Route path="/404" element={<NotFound />} />
        <Route path="*" element={<Navigate to="/404" replace />} />
    </Routes>
</BrowserRouter>

If I find other ways to do it I'll edit my answer.

EDIT WITH SOLUTION that works with refresh or path changes:
I figure out how to manage this issue by using hashRouter from ReactRouter6. This method doesn't require using a basename like with the browserRouter. Here it is an easy example:

import { createHashRouter, RouterProvider } from "react-router-dom";

const router = createHashRouter([
  { path: "/", element: <PageHome />, },
  { path: "/page2", element: <Page2 />, },
);

const App = () => {
  return (
    <RouterProvider router={router} />
  );
};

edited Jul 11, 2023 at 12:46

answered May 15, 2023 at 18:03

Etrusko

211 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Routing not working when creating ui5 application using ui5-webcomponents-react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related