react routes not redirecting to pages on heroku-CodePudding

So I have a deployed a react app to heroku. In local host the routes work fine. The default being homepage and the 'portal/' going to the login/sign up page which works normal with http://localhost:3000/portal.

On heroku however it just redirects/stays on the homepage. Even if I do a route that doesnt exist? something like https://my-hero-app.com/random-route

I am using a github-heroku pipeline so its always up to date

let me know if you need any more information! Thanks!

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;

CodePudding user response：

this could be a lot of things, did you build your app to production? did you serve it using nodejs or express? is your Procfile properly configured?

CodePudding user response：

if you used node.js you will need to change the port. Try this.

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

This should normally fix the issue. It basically means whatever is in the environment variable PORT, or 3000 if there's nothing there.

CodePudding user response：

The home page "/" matches all paths. If you want to handle 404 pages you will want to create another route with path "*". This explains why random paths display the home page

As for why '/portal' refuses to render are you serving your app in a different directory perhaps on deploy? If so you'll want to set basename

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

ReactJS routing issue after deployment in production may be a simliar situation to what you've described