reactjs 使用ui 5-webcomponents-react创建ui 5应用程序时路由不工作

lb3vh1jj 于 2023-05-17 发布在 React

关注(0)|答案(1)|浏览(101)

我正在创建一个基于ui 5-webcomponents-react的react应用，并将其部署到SAP BTP。每次应用直接加载index.html。我不知道如何在这个应用程序中使用react-router。

文件
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>
);

我已经在App.js中添加了路由

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

工作列表.js

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

index.html页面上未显示初始div元素（Worklist component）。而且我对如何导航到另一个页面，以及URL可能看起来如何有疑问。

reactjs

来源：https://stackoverflow.com/questions/74440341/routing-not-working-when-creating-ui5-application-using-ui5-webcomponents-react

1条答案

按热度按时间

0tdrvxhp1#

为了克服这个问题，我在 BrowserRouter 中使用了 basename，所以URL将是 * xxxx/index.html * 或 xxxx/index.html/foobar。
我使用这个解决方案的原因，如果你改变***“welcomeFile”：“index.html”到“welcomeFile”：“***它无法识别该应用程序。
它可能不是最漂亮的解决方案，但对于SAP环境中的React应用程序来说，它肯定是最快和最有效的。
因此，要使用简单的路由器（React-Router v6），代码如下：

// 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>

如果我找到其他方法我会修改我的答案

赞(0）回复(0）举报 2023-05-17

我来回答

reactjs 使用ui 5-webcomponents-react创建ui 5应用程序时路由不工作

1条答案

相关问题

热门标签

最新问答