CODEWITHSUNDEEP
reactjsnginxreact-router
Hasan Zahran
Hasan Zahran

Reputation: 1442

When refreshing any specific route it shows blank page

The home page refreshes successfully. But for any other route when I refresh the page goes blank.

Example:

.../view/5f9ad1c453db51de5e52f94d
.../browse/movies/

And here the settings for above:

1- Nginx configuration

.
.
.
root /var/www/html/build;
location / {
   try_files $uri $uri/ /index.html;
}
index index.html;
.
.
.

2- React

<Router history={history}>
<Nav />
<div className="container mx-auto padding-m">
    <Switch>
        <Route exact={true} path="/" component={Home} />
        <Route path="/browse/movies/*" component={Browse} />
        <Route path="/view/:id" component={View} />
        <Route path="/category/:id" component={Category} />
    </Switch>
</div>
<Footer />

3- Versions

----
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-js-pagination": "^3.0.3",
"react-router-dom": "latest",
"react-scripts": "3.4.3",
----

And I already tried to add "homepage": "./" to package.json

I did not try to eject and change webpack settings,

Any advice?

I already checked the following answer but it didn't work for me: blank page when refreshing in react router

Upvotes: 0

Views: 1410

Answers (2)

Lukas Heiligenbrunner
Lukas Heiligenbrunner

Reputation: 136

In my case changing "homepage": "./" to "homepage": "/" in my package.json did the trick.

Upvotes: 3

Hasan Zahran
Hasan Zahran

Reputation: 1442

my issue was in package.json, and I specified the homepage in my package.json, for example:

.
.
"homepage": "http://mywebsite.com/relativepath"
.
.

and solved my issue.

Thanks!

Upvotes: 1

Related Questions