ReactJS routing issue after deployment in production

Question

I have some routing issues for my ReactJS application post deploying into a subdirectory in production domain.

I am placing the build files into directory www.xyz.com/folder1/appfolder/ on my website and my homepage attribute in package.json is set to the same path. I have also tried to use manifest.json "start_url": "./dashboard" And my application file has route defined as below

<Route exact path="/" component={DashboardPage} />

Expected: When I run on localhost everything works fine as in the default page is the dashboard page when I visit localhost. But in production when I visit

www.xyz.com/folder1/appfolder/

i expect the dashboard page to load up but it doesn't load but a blank page comes up with all left nav, header, footer with no content. Once I click on Dashboard link in side nav then the page loads up but with this URL

www.xyz.com/appfolder/ (missing folder1 in path)

If I take this below path and visit directly then its broken as well

www.xyz.com/appfolder/

Only when I visit below and then click on side navbar dashboard link then it redirects to just app folder and the page loads up.

www.xyz.com/folder1/appfolder/

Kindly suggest as something really basic is missing due to which I am facing this problem. its a bad user experience.

Wraithy · Accepted Answer · 2022-01-10 10:21:50Z

1

Set basename prop in your BrowserRouter

<BrowserRouter basename='folder1'>
...routes...
</BrowserRouter>

answered Jan 10, 2022 at 10:21

Wraithy

2,0961 gold badge7 silver badges15 bronze badges

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

4 Comments

Fazal Over a year ago

I have tried this. Still not working. While there is some improvement where I now get the folders in the URL. Ex:

Fazal Over a year ago

I have tried this. Still not working. While there is some improvement where I now get the folders in the URL. Ex: www.xyz.com/folder1/appfolder/ (Clicking on sidebar links takes us to) www.xyz.com/folder1/navpage1 etcc. instead of previous www.xyz.com/navpage1 There are 2 issues: www.xyz.com/folder1/appfolder/ doesnt take me to the ('/' redirect component which in this case is set to 'DashboardPage' is still not displaying. Second issue is routing path still has issues missing appfolder in the path www.xyz.com/folder1/navpage1 instead of expected domain/folder1/appfolder/navpage1

Wraithy Over a year ago

If your whole app is in folder1/appfolder/ then use this as your basename...... if you /appfolder/ is just your landing page and you have other pages like /folder1/secondpage that you want to route, you can redirect your root to appfolder like <Route exact path="/" ><Redirect to="/appfolder" /> </Route>

Fazal Over a year ago

Thank you I just made that fix and works.

Matt · Accepted Answer · 2022-01-10 09:44:14Z

0

Try using hashrouter instead of browser router.

So in your app.js (if this is where you have your routes defined)

Change the import like this

FROM

import { BrowserRouter } from 'react-router-dom'
...
<BrowserRouter>
  <Switch>
    <Route exact path="/" component={DashboardPage} />
    ....
  </Switch>
</BrowserRouter>

TO

import { HashRouter } from 'react-router-dom'
...
<HashRouter>
  <Switch>
    <Route exact path="/" component={DashboardPage} />
    ....
  </Switch>
</HashRouter>

answered Jan 10, 2022 at 9:44

Matt

9316 silver badges14 bronze badges

1 Comment

Blessed Jason Mwanza Over a year ago

This is not recommended if you plan on having your site indexed by search engines As mentioned; - Here, - Here - and here

Collectives™ on Stack Overflow

ReactJS routing issue after deployment in production

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related