react routes not redirecting to pages on heroku

Question

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;

score 0 · Answer 1 · answered Jul 12 '22 at 06:38

0

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?

answered Jul 12 '22 at 06:38

DEN DEN G

31
2

Okay I see what you mean. yeah react frontend with node/express backend. Although the backend is only for serving data from the database and the front end still renders fine without it as I built it first without the backend and its been fine on heroku until i added a second page. Also no procfile as its done entirely though github – coldharbour Jul 12 '22 at 06:42
It's not API server that I am saying. Serve your built react app. Here check this out https://betterprogramming.pub/how-to-deploy-your-react-app-to-heroku-aedc28b218ae – DEN DEN G Jul 12 '22 at 06:44
I dont understand what you mean. My deployment is a react application heroko done through a github pipeline – coldharbour Jul 12 '22 at 06:47
Also you still need procfile so that heroku knows where how to start your app – DEN DEN G Jul 12 '22 at 06:48
I have already deployed my react app to heroku, that isnt the issue. its routing to other pages that isnt working – coldharbour Jul 12 '22 at 06:48
Checkout the link i sent. – DEN DEN G Jul 12 '22 at 06:50
I see, then I have no idea what is the issue with your app. Mine worked perfectly – DEN DEN G Jul 12 '22 at 06:54
you have react routing working on a deployed heroku app? – coldharbour Jul 12 '22 at 06:55
yes, Its working fine even when changing pages. do you have your app uploaded in github? perhaps I could check? – DEN DEN G Jul 12 '22 at 06:57
can you show your routing section in what i assume is your App.js or otherwise? – coldharbour Jul 12 '22 at 06:58
it's basically the same as yours. Im not sure the problem with your app is in routing exactly. – DEN DEN G Jul 12 '22 at 06:59
do you have a procfile in your react app? – coldharbour Jul 12 '22 at 07:00
yes, like i said it is the entry point of your heroku so it's kinda a must to have it if you deploy there. – DEN DEN G Jul 12 '22 at 07:02

score 0 · Answer 2 · answered Jul 12 '22 at 06:43

0

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.

answered Jul 12 '22 at 06:43

Wayne Celestin

149
1
6

my backend is on a different deployment and works fine. my homepage on the front end in heroku deploys as it should I just cant access the second page through routing (despite routing working fine on localhost) – coldharbour Jul 12 '22 at 06:45
Sorry but it is very strange. I am not sure that I will be able to help in this case. – Wayne Celestin Jul 13 '22 at 09:36

score 0 · Answer 3 · answered Jul 12 '22 at 07:11

0

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

answered Jul 12 '22 at 07:11

Geno Diaz

400
1
7
21

its the exact same folder structure and everything as my local, if thats what you mean? – coldharbour Jul 12 '22 at 07:14
only simmilar thing i can find is this https://stackoverflow.com/questions/41772411/react-routing-works-in-local-machine-but-not-heroku but this is for server side so honestly probs not helpful – coldharbour Jul 12 '22 at 07:15
what do you mean another path with "*"? – coldharbour Jul 12 '22 at 08:43

react routes not redirecting to pages on heroku

3 Answers3