react routes not redirecting to pages on heroku

user_15555534 0
Viewed 31

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;
reactjs heroku
3 Answers

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?

user_145873090

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.

user_183373910

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

user_16543120
Related