javascript - react router url issues after deployment - Stack Overflow

admin管理员组

文章数量:1315244

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, .

As the project is in a react-project folder this "/" refers to the actual route which is /

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

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?

• javascript
• reactjs
• ecmascript-6
• routes
• react-router

Share Improve this question Follow asked Dec 1, 2017 at 20:50 peter flanaganpeter flanagan 9,8302727 gold badges8181 silver badges139139 bronze badges 5

• 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 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 Commented Dec 1, 2017 at 21:15
• put "/" <Route>in the last not the first? – Aaqib Commented Dec 1, 2017 at 21:16
• are you, by any chance using create react app? – Carlos Valencia Commented Dec 1, 2017 at 21:56
• @randomguy04 I am – peter flanagan Commented Dec 1, 2017 at 22:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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.

本文标签： javascriptreact router url issues after deploymentStack Overflow