在为React（react-router）组件安装组件后渲染资产

Question

I am using React, React-Router, & Redux in my application. My issue is that when my route triggers a redirect from my landing page for single sign on to the home component once authenticated, the component renders before the assets (from the root HTML page) are loaded. Upon a page refresh the assets are loaded and the CSS renders correctly. I am confused because the with react this is a SPA and I would have thought the assets would have loaded with the landing page render.

I have tried the following:

• Adding a setTimeout prior to initiating the API call for authentication in my single sign out landing page
• Trying to have a loading indicator render until the component fully mounts (through using the component state to control which content is viewed.
• I also tried adding a setTimeout in the toggling of the views in the home component to slow down the switch from the loading view to the main content.

The routing and authentication are working correctly. It is only that the assets from the html are loaded after the component appears.

I follow the same logic of pushing to the home page via my other two authentication API calls that are initiated through my login pages. This single sign out API call triggers the same method as the other two which ends with a

history.push('/home')

To explain the process: after the completion of the authentication the action creator pushes to the home page which mounts the component. The component content mounts fine but it renders prior to the assets loading which is a freaking annoying problem. I'm not sure why this is only happening with the single sign on redirect and not the other two validation processes.

Again, I tried adding conditional rendering to show a loading image until the component mounts and the state is updated, but this doesn't work as I believe it fails to take into consideration the assets in the html.

So my question is whether or not there's a better way for me to conditionally render a loading indicator until I can ensure the assets are loaded in the html.

UPDATE: I went into chrome dev tools and verified the script tags are loaded. So basically it isn't processing the css until the refresh...

Answer 1

So my issue was with the way the browser was looking for the assets files relative to my urls. Because I added /ss/:id to the root url the browser was attempting to find the assets with the /ss/:id appended to the base url. This led to them not being found and the page loading without the assets. With the page refresh the url was back to the root url and the assets were able to be identified.

I decided to fix this by utilizing the 'this.props.location.search' option with react-router along with the npm package 'qs' which allowed me to parse the string and select the id from the url.

so my react route in the index.js page looks like:

<Route path="/ss" component={SSAuth} />

and in my SSAuth file (single sign on):

 componentDidMount(match) {
 const value = qs.parse(this.props.location.search, {ignoreQueryPrefix : true})
 console.log(value)
 this.props.ssauthentication(value.id, this.props.history)


}

I had to add the optional parameter {ignoreQueryPrefix : true} so the search query '?' would be ignored.

so with the redirect url looking something like

https://baseurl.com/ss?id=example

my code with identify and parse out 'example' and then pass that to my action method 'this.props.ssauthentication' which triggers the authentication api call in my actions_index.js file.

*note: I pass this.props.history from react-router as well to allow for the page redirect and home component to mount once the api calls have finished.