1

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.

James Z
  • 12,209
  • 10
  • 24
  • 44
Fazal
  • 87
  • 9

2 Answers2

1

Set basename prop in your BrowserRouter

<BrowserRouter basename='folder1'>
...routes...
</BrowserRouter>
Wraithy
  • 1,722
  • 1
  • 5
  • 13
  • I have tried this. Still not working. While there is some improvement where I now get the folders in the URL. Ex: – Fazal Jan 10 '22 at 13:17
  • 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 – Fazal Jan 10 '22 at 13:24
  • 1
    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 ` ` – Wraithy Jan 10 '22 at 13:30
  • Thank you I just made that fix and works. – Fazal Jan 10 '22 at 14:00
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>
Matt
  • 791
  • 4
  • 13
  • This is not recommended if you plan on having your site indexed by search engines As mentioned; - [Here](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics#5), - [Here](https://www.searchenginejournal.com/definitive-list-reasons-google-isnt-indexing-site/118245/) - and [here](https://seranking.com/blog/single-page-application-seo/) – Blessed Jason Mwanza Apr 30 '23 at 21:05