索引
您是否希望利用React和SAP Cloud Foundry的强大功能构建出色的应用程序？好吧，让我们开始今天的主题：散列路由。
今天我们将学习如何使用react+CAP+AppRouter+HTML5 Repo服务进行散列路由，下面是一些简单的步骤！因为你可以有一个只有几个按钮和图片的网站，但一旦应用程序开始增长，你就需要路由。我将通过一个例子与您分享我是如何使路由成为可能的，如果您觉得有用或者您想提出任何改进建议，请提供任何反馈。
App Init
首先，我们将使用我的团队和我创建的一个小脚本，以便在CF中构建称为CF create App的完整堆栈应用程序时让您的生活更轻松。这将安装一个合适的CAP，react应用程序，html5 repo服务，添加Hana和一些调整，使部署尽可能简单。只需运行
$npx cf create app
这将花费几分钟时间，主要是由于react的应用程序安装。
在生成的文件夹中，您将发现一个CAP应用程序，京淘客，其中包含常用文件夹和新文件夹：
app/包含react应用程序–它有一个已修改的清单和一个xs-应用程序.json在公用文件夹中正确使用HTML5回购服务srv/您的所有服务定义–已创建默认值，这样应用程序在启动时不会崩溃db/所有域模型和数据库HTMLDeployer/需要在html5 repo服务中部署html5应用程序approuter/approuter，具有从html5 Repo服务到后端和html5应用程序的默认路由mta.yaml公司预配置mta.yaml公司–将处理您的部署，除非您知道自己在做什么，否则不要触摸此
安装完成后，您只需进入项目文件夹并运行这些命令即可启动应用程序。这将启动react应用程序并执行cds watch以运行CAP应用程序：
$cd$npm运行开发
就是这样！
安装React模块
接下来进入app文件夹，我们将安装一些依赖项。我们要安装的第一件事是连接路由器和历史。我个人有一个问题，安装历史版本5.0.0会导致redux状态无法正确更新，购物返利app，所以如果遇到这个问题，请像我一样安装版本4.10.1。在app文件夹中运行以下命令：
$npm install历史@4.10.1连接的react路由器
您可以使用不同的模块，但此模块将允许我们调度历史方法（与redux一起使用），并支持react路由器v4和v5。其次安装react router和前面提到的redux，我想你已经知道这个库了
$npm install react router react router dom redux react redux
Create redux Store
之后我们需要用特定的密钥路由器创建一个reducer。就我个人而言，我喜欢保持干净，你可能想在src文件夹内创建一个名为store的文件夹，其中包含以下文件：
$mkdir store&&cd store
Reducers//项目/app/src/store/异径管.js
如果您在过去使用过redux，阿里大数据，这些reducer文件可以正常工作，只需在项目中添加您可能需要的reducer即可。如果你在过去没有与redux合作过，并且喜欢与react一起工作，我强烈建议你开始阅读它，因为它会让你的react生活难以置信的精彩。我特别喜欢使用Redux工具箱https://redux-toolkit.js.org/
继续，让我们创建商店！
创建中间件//项目/app/src/store/配置存储.js
集成Redux存储
为了使所有这些配置工作，我们将把配置的存储添加到我们的索引.js在src文件夹中，自助建站服务，如下所示。还可以查看指向通配符"*"的路由。我们用它重定向到我们的主页，以避免中断的路线索引.js//项目/app/src/索引.js
使用连接的React路由器的React组件示例
此外，您还希望看到它的实际运行！所以我把一个小组件放在一起，它将帮助你理解如何使用这个库进行路由默认组件.js//项目/app/src/默认组件.js
我们学习了如何实现基本的哈希路由，如何"推"到不同的路由，以及如何重定向。您可以通过点击react应用程序的"匹配"和"未命中"按钮在本地进行尝试–查看路线的变化。我们到云端去吧！
最后一步
使用库cf create app，所有模块都会在您的应用程序中添加和配置mta.yaml公司因此，您不必手动执行任何操作，除非您想添加自己的服务或自行调整它们。它已经配置好了，所以您只需要构建和部署？
在项目文件夹中运行以下命令：
$mbt build$cf deploy mta\u archives/
考虑到这一点，大数据app，您需要启用HTML5 Repo服务并拥有足够的配额。一旦您的应用程序部署完毕，请转到cf cli提供的批准者URL，希望您的应用程序能够启动并运行！
结论
今天我们学习了如何使用CAP+approuter+react+html5 repo服务快速创建应用程序。react应用程序将部署在HTML5 Repo服务中，并由审批者使用。为了在我们的应用程序中导航，我们已经实现了哈希路由，防止我们的路由中断。
