react不会重定向到heroku上的页面

Question

所以我已经部署了一个react应用到heroku。在本地主机中，路由工作良好。默认是主页，'portal/'进入登录/注册页面，正常使用http://localhost:3000/portal。

在heroku上，它只是重定向/停留在主页上。即使我做了一条不存在的路线?比如https://my-hero-app.com/random-route

我使用github-heroku管道，所以它总是最新的

如果你需要更多的信息，请告诉我!谢谢!

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Homepage from './pages/homepage/Homepage'
import Portal from './pages/portal/Portal'

function App() {
return (
<div className="App">

<BrowserRouter>
<Routes>
<Route path="/" element={<Homepage />}></Route>
<Route path="/portal" element={<Portal />}></Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;

Answer 1

这可能是很多东西，你是否将你的应用程序构建到生产中?你是用nodejs还是express提供的?你的个人档案配置正确吗?

Answer 2

如果使用node.js，则需要更改端口。试试这个。

const PORT = process.env.PORT || 3000;
app.listen(PORT);

这通常会解决这个问题。它基本上表示环境变量PORT中的内容，如果没有，则为3000。

Answer 3

首页"匹配所有路径。如果你想处理404页面，你需要创建另一个带有路径"*"的路由。这解释了为什么随机路径显示首页

至于为什么'/portal'拒绝渲染你的应用程序在不同的目录可能部署?如果是这样，你需要设置basename

<BrowserRouter basename="/calendar">
<Link to="/today"/> // renders <a href="/calendar/today">
<Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
</BrowserRouter>

部署到生产环境后的ReactJS路由问题可能与你描述的情况类似