UI response for async onEnter - react-router

Question

I'm using react-router v1.0.0-rc4.

Here is my routes:

  <Router>
    <Route path="/" component={App}>
      <Route path="info" component={Info} />
      <Route path="dashboard" onEnter={callAjax} component={Dashboard} />
    </Route>
  </Router>

When url change to /dashboard, onEnter will be called, an ajax request will send to server and about 1 second response time.

So in this 1 second, UI didn't have any response. What I want to ask is anything I can do for this?

What I'm trying to do is in dashboard component, I check the data is existed or not. If not exist, I will show spin, otherwise I will show data. But the issue is before the ajax complete, the dashboard will not be mounted.

So please give some suggestion, thanks.

taion · Accepted Answer · 2015-11-10 05:42:49Z

1

If necessary you can call history.listenBefore on your app component to listen for imminent updates to history, and do some work in response to that to set up a transitioning state.

However, our official recommendation is to not use onEnter for data fetching unless things like server-side rendering force you to; in general, for exactly reasons like the one you have above, you're better off doing the data fetching as something like part of the component rendering (potentially via a Flux implementation), and then rendering the loading indicator in the route component while it waits for its data.

answered Nov 10, 2015 at 5:42

taion

2,8371 gold badge17 silver badges22 bronze badges

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

Comments

Dhaval Patel · Accepted Answer · 2015-11-10 07:12:45Z

0

Yes because once data will store in your variable then you have to explicitly clear those data otherwise what happen very first time you will get the spin after that you will not able to see the spin.

so you have to clear the old data data when you called the API like your store should be

resetData:function()
{
_data={};
}

you have to call this method before calling the API

answered Nov 10, 2015 at 7:12

Dhaval Patel

7,6116 gold badges43 silver badges72 bronze badges

1 Comment

Zhe Over a year ago

Hi Dhaval, thanks for help, but I know clear data and it's not about with my question. My question is when very first time page loaded, there will be 1 second blank to call ajax by router. Before the ajax response, dashboard component will not be by mounted by router. So I can't show that spin at the first 1 second.

Collectives™ on Stack Overflow

UI response for async onEnter - react-router

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related