如何使用react-router与www.example.com上托管的网站render.com
我的React路由器是
<Router>
<Routes>
<Route exact path={"/"} element={<ProductsList />} />
<Route exact path="/divisionSection" element={<Home />} />
{/* <Route path="/addDivision/:type" element={<AddDivision />} /> */}
<Route path="/addDivision" element={<AddDivision />} />
<Route path={"/editProduct/:objectId"} element={<AddProduct />} />
<Route path="/productsList" element={<ProductsList />} />
<Route path="/addProduct" element={<AddProduct />} />
</Routes>
</Router>
显然这行不通
当我输入**https://cakeservice.onrender.com/productsList
**它将显示未找到或index.html
,因为我已经设置了它的方式,但我不为所有的方式index.html
,我想根据我的React路由器。
我的尝试:
1.使用webpack
,但我被困在加载 Bootstrap 的部分,我没有找到解决方案。
如果我使用webpack,我可以用途:
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true
},
1.我尝试使用vite.js
,我不能设置它与已经存在的vite项目,我不知道它是否支持回退方法。
一个答案或替代方案或资源来研究将是伟大的。请
1条答案
按热度按时间axr492tv1#
在一个React应用程序中,你只有一个index.html文件,它会在自己的内部渲染每个页面。因此,我们称这种网站为SPA(单页应用程序)。在服务器端,你总是需要将页面重定向到包含index.html的根文件夹。
另一方面,我认为你不需要将一些路由重定向到src/ folder中的目录。React-router-dom是为你处理这个路由的库。