react router url issues after deployment

Question

I am using React router to change routes. This works well when I develop locally.

My router code looks like this and everything works perfectly.

<Router>
    <Route exact path="/" render={(routeProps)=> <Homepage {...routeProps} />}/>
    <Route path="/graph" render={(routeProps)=> <AboutPage {...routeProps} />}/>            
</Router>

The issue I am having is when I deploy it to my github page, http://exampleuser.github.io/react-project.

As the project is in a react-project folder this "/" refers to the actual route which is http://exampleuser.github.io/

Can anyone advise how the path should look so it works when deployed?

Have you tried using <Switch> ? import <Switch> from 'react-router-dom' and then wrap everything in a <div> and then wrap all <Route>'s inside <Switch> — Aaqib
– Aaqib, Commented Dec 1, 2017 at 20:58
I have, but i don't think it is to do with Switch - I believe it is to do with the route once I have deployed as it is no longer "/" — peter flanagan
– peter flanagan, Commented Dec 1, 2017 at 21:15

Carlos Valencia · Accepted Answer · 2017-12-01 22:07:33Z

8

You can use the basename prop in your router, just make sure you only use that in production and not in development (you could use environment variables for that) your router should look like this:

<Router basename="your-react-project">
  {/* routes */}
</Router>

If you are using create_react_app, you can just use the env variable process.env.PUBLIC_URL like this (which is empty en development so it will work fine for bot dev and production):

<Router basename={process.env.PUBLIC_URL}>
  {/* routes */}
</Router>

I actually have a project running with this configuration and works just fine.

answered Dec 1, 2017 at 22:07

Carlos Valencia

7,0532 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

peter flanagan Over a year ago

so it actually works fine when it is the project at the root of my github repo, but it is in a subfolder i.e - http://exampleuser.github.io/react-project

Carlos Valencia Over a year ago

have you tried the first approach? where you can set the basename manually?

peter flanagan Over a year ago

yeah man, just deployed there and it works! the baseman works a treat! Green tick coming up! side question, where do u set the process.env.PUBLIC_URL variable?

Carlos Valencia Over a year ago

glad to hear that. You don't have to set it yourself, they briefly explain how it works here github.com/facebookincubator/create-react-app/blob/master/…

jerryurenaa · Accepted Answer · 2019-06-13 18:05:45Z

0

it's an easy fix I came across the same issue here is how I fixed it.

1- go to your root directory in your cPanel or server if you are using apache. and create a .htaccess file

open the file and add the following code to it.

#jerryUrena is awesome RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]

after this, your website should work the same way.

answered Jun 13, 2019 at 18:05

jerryurenaa

4,7701 gold badge33 silver badges21 bronze badges

Collectives™ on Stack Overflow

react router url issues after deployment

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related