为 React (react-router) 渲染组件安装后的资产渲染

Question

我在我的应用程序中使用 React、React-Router 和 Redux。我的问题是，当我的路由触发从登录页面的重定向以单点登录到主组件时，一旦经过身份验证，组件就会在加载资产（来自根 HTML 页面）之前呈现。在页面刷新时，资源被加载并且 CSS 正确呈现。我很困惑，因为 with react 这是一个 SPA，我原以为资产会加载着陆页渲染。

我尝试了以下方法：

• 在我的单点登出登录页面中启动 API 调用以进行身份​​验证之前添加 setTimeout
• 尝试在组件完全挂载之前呈现加载指示器（通过使用组件状态来控制查看哪些内容。
• 我还尝试在主组件中的视图切换中添加一个 setTimeout，以减慢从加载视图切换到主要内容的速度。

路由和身份验证工作正常。只是在组件出现后加载来自 html 的资产。

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

结尾

history.push('/home')

流程说明：认证完成后，动作创建者推送到挂载组件的主页。组件内容安装良好，但它在加载资产之前呈现，这是一个非常烦人的问题。我不确定为什么这只发生在单点登录重定向而不是其他两个验证过程中。

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

所以我的问题是是否有更好的方法让我有条件地呈现加载指示器，直到我可以确保资产加载到 html 中。

更新：我进入了 chrome 开发工具并验证了脚本标签已加载。所以基本上在刷新之前它不会处理 css...

Answer 1

所以我的问题在于浏览器查找与我的网址相关的资产文件的方式。因为我将 /ss/:id 添加到了根 url，所以浏览器试图查找带有附加到基本 url 的 /ss/:id 的资产。这导致找不到它们，并且页面加载时没有资产。随着页面刷新，url 回到了根 url，并且可以识别资产。

我决定通过使用带有 react-router 的 'this.props.location.search' 选项以及允许我解析字符串并从 url 中选择 id 的 npm 包 'qs' 来解决这个问题。

所以我在 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} 以便搜索查询“？”会被忽略。

所以重定向网址看起来像

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

我的代码识别并解析出“示例”，然后将其传递给我的操作方法“this.props.ssauthentication”，该方法在我的 actions_index.js 文件中触发身份验证 api 调用。

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