Question

我正在使用React，React-Router，＆amp; Redux在我的应用程序中。我的问题是，当我的路由通过身份验证后触发从我的登录页面进行单点登录到主组件的重定向时，组件会在资源（来自根HTML页面）加载之前呈现。页面刷新后，资源将被加载并且CSS正确呈现。我感到困惑，因为对此反应是一个SPA，我认为资产将加载着陆页面渲染。

我尝试了以下内容：

在我的单点注销登录页面中启动API调用以进行身份验证之前添加setTimeout
尝试使用加载指示器进行渲染，直到组件完全安装（通过使用组件状态来控制查看哪些内容。
我还尝试在home组件中切换视图时添加setTimeout，以减慢从加载视图到主内容的切换。

路由和身份验证正常运行。只有在组件出现后才会加载html中的资源。

我遵循通过我的其他两个通过我的登录页面启动的身份验证API调用推送到主页的相同逻辑。此单点注销API调用触发的方法与另外两个以

结尾的方法相同

history.push('/home')

解释过程：在完成身份验证后，操作创建者将推送到安装组件的主页。组件内容安装得很好，但它在资产加载之前呈现，这是一个令人讨厌的恼人问题。我不确定为什么这只发生在重定向的单点登录而不是其他两个验证过程。

同样，我尝试添加条件渲染来显示加载图像，直到组件安装并更新状态，但这不起作用，因为我认为它没有考虑到html中的资产。

所以我的问题是，在我确保资产加载到html中之前，是否有更好的方式让我有条件地呈现加载指示符。

更新：我使用了chrome dev工具并验证了脚本标记是否已加载。所以基本上它不会在刷新之前处理css ......

Answer 1

所以我的问题在于浏览器寻找相对于我的网址的资源文件的方式。因为我将/ ss /：id添加到根URL，浏览器试图找到附加到基本URL的/ ss /：id的资产。这导致他们找不到并且没有资产的页面加载。通过页面刷新，URL返回到根URL，并且可以识别资产。

我决定通过利用＆＃39; this.props.location.search＆＃39;来解决这个问题。使用react-router和npm包的选项＆＃39; qs＆＃39;这允许我解析字符串并从URL中选择id。

所以我在index.js页面中的反应路径如下：

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

并在我的SSAuth文件中（单点登录）：

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


}

我必须添加可选参数{ignoreQueryPrefix：true}，以便搜索查询＆＃39;？＆＃39;会被忽略。

所以重定向网址看起来像

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

我的代码识别和解析＆＃39;示例＆＃39;然后将其传递给我的动作方法＆＃39; this.props.ssauthentication＆＃39;它会在我的actions_index.js文件中触发身份验证api调用。

*注意：我也会从react-router传递this.props.history，以便在api调用完成后允许页面重定向和home组件挂载。

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

1 个答案: