如何部署具有可变域的react js项目?

Question

我发现自己在部署react js项目时遇到了一点问题。我一直在开发二维码餐厅菜单应用一段时间了。它应该是这样工作的:我已经在Android Studio和XCode中创建了一个应用程序，从那里用户可以编辑他们的菜单(授权用户)，我已经完成了react js应用程序，应该只用于阅读菜单。现在我感兴趣的是，是否有可能主持一个项目，使它有一个正常的固定部分的域名(第一页)，但在结束的东西像"/somekindofid"因为我在项目中使用react router dom进行导航，当我在本地启动它时，它就会工作，就像它打开的第一页是http://localhost:3001/…→这三个点是某种id，因为当我扫描qr码时它会包含某种url在最后是某种唯一的id，基于那个id它会接近数据库并加载菜单。

import { Routes, Route, Link } from 'react-router-dom';
import './app.css';
import { Fragment } from 'react';
import Home from './pages/Home';
import Categories from './pages/Categories';
import Meals from './pages/Meals';
import MealDetails from './pages/MealDetails';
import About from './pages/About';
function App() {
return (
<>
<Routes>
<Route path="/:restaurantId" element={<Home />} />
<Route path="/categories/:restaurantId/:language" element={<Categories />} />
<Route path="/about/:restaurantId" element={<About />} />
<Route path="/meals/:restaurantId/:id/:language" element={<Meals />} />
<Route path="/mealdetails/:restaurantId/:categoryId/:mealId/:language" element={<MealDetails />} />
</Routes>
</>
);
}
export default App;

这是我的App.js，正如你所看到的第一页是域名加餐厅id。我的问题是，我可以以某种方式部署这个项目，域的最后一部分是可变的(在我的情况下是restaurantId)。

我试着在netflix上部署它，我真的不知道它应该如何工作。当我在URL部分手动尝试键入某个页面的路由时，我得到404错误，但是当我在localhost:3000之后手动键入某个页面的本地路径时，它可以工作。例如:https://myapp.netlify.app/hAdsaSV65asdAdKMs其中https://myapp.netlify.app应该是域名，而hAdsaSV65asdAdKMs应该是餐厅id。然后我会使用useParams()读取它。有人知道解决这个问题的方法吗?提前谢谢。

Answer 1

没关系，我找到了一个解决方案，使用哈希路由器，然后在域名中放置/#/作为url和餐厅ID的分隔符。