CODEWITHSUNDEEP
reactjsreact-routerreact-reduxrouterreact-router-redux
tapan dave
tapan dave

Reputation: 303

blank page when refreshing in react router

when i navigate from /home to /dashboard,router is working fine but when i navigate from /home to /profile:id, router navigates me to that profile page which is also working fine,but when i refresh it,then it becomes blank page and does not give me any 404 or redirects back to home page,i am using

react-router: "^4.2.0", react-router-dom: "^4.2.2", react-router-redux: "5.0.0-alpha.6",

So,how to get rid of blank page and if url is at /profile/5,and then on refresh page gets navigate back to home page or anything that should be appropriate,please help?

index.js

ReactDOM.render(
 <Provider store={store}>
    <ConnectedRouter history={history}>
        <Switch>
            <Route path="/" component={App} />
            <Route component={Page404} />
        </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app-site')
);

App.js

<Switch>
    <Route path={`/login`} component={LoginMember} />
    <Route path={`/registermember`} component={SignUp} />
    <Authentication component={AuthenticateRoute} />
    <Route component={Page404} />
</Switch>

const AuthenticateRoute = ({ match }) => (
 <Switch>
    <Authentication path={`${match.url}`} component={MainApp} />
    <Route component={Page404} />
 </Switch>
);

MainApp

<Switch>                
    <Route path={`/home`} component={Home} />
    <Route path={`/profile/:id`} component={Profile} />
    <Route component={Page404} />
</Switch>

Upvotes: 5

Views: 18833

Answers (5)

Javed Ansari
Javed Ansari

Reputation: 21

I recently solved a similarly weird issue. I was running a simple HTML and vanilla JS and website in Visual Studio Code's Live Extension.

Initially on startup I would always get black screen and only after a hard refresh (Ctrl + F5) would I get the contents of the website on the screen.

Simply clearing the browser cache solved the problem.

Upvotes: 0

TheodosisKats
TheodosisKats

Reputation: 198

The problem we are solving

When building and deploying an app to a server, sometimes refreshing the page results in a blank page. I discovered that the solution to this issue was in the package.json file.

Your package.json currently

Do the following change:

By default, your package.json might contain something like this:

"homepage": "./" or this "homepage": "."

Changes required to solve the issue in package.json

To fix the issue, simply change it to:

"homepage": "/"

This will ensure that everything loads correctly, including store, context, components, redux, etc.

I hope this helps anyone facing the same problem. Here are some additional details that might be useful:

This solution is for react router v6.

Further explaining and interesting facts in my quest to solve this mystery...

The problem mostly appears in nested routes. I tested it in non-nested routes and everything worked as expected, so nested routes seem to be a factor here.

By nested routes, I mean routes that are inside a different file from the original route. For example, in my app, I had a frontpage for clients and a dashboard for managing products shown on the frontpage. My file structure looked like this:

-src (Folder)
--App.js (Contains two main routes of /frontpages and /dashboard, which render the files from the routes folder)
--Routes (Folder)
---Dashboard.jsx (Contains nested dashboard routes)
---Frontpages.jsx (Contains nested frontpage routes)
--Components (Folder)
---All the files that get rendered in the routes folder components.

Upvotes: 11

Hasan Zahran
Hasan Zahran

Reputation: 1452

I've been through this and my issue was in package.json, and I specified the homepage in my package.json, for example:

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

Upvotes: 0

MONEYMSN
MONEYMSN

Reputation: 89

This is because react is not able to locate the history of the url which is been naviagted by users. Basically react property will search for the url which is saved in history but here developer didn't use that. To solve that follow these three steps. import the use like this import { useHistory } from "react-router-dom"; assign to a variable and use that main div/router which all the component is wrapped inside it

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

From your code,

<Switch>
  <Route path="/" component={App} />
  <Route component={Page404} />
</Switch>

<Route path="/" component={App} /> it causing to render the App component for every route.So,if you refreshing the page,Page404 will not get a chance to render it.

Solution :

Put exact for /.

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

Upvotes: 0

Related Questions