使用 Redux-persist 和 React-snapshot 的 React Router V4 保护私有路由

Question

我正在使用 React Router Route 组件实现私有路由：

function PrivateRoute({component: Component, authed, emailVerified, ...rest}) {
  return (
    <Route
      {...rest}
      render={props =>
        authed === true
          ? <Component {...props} />
          : <Redirect to={{pathname: '/', state: {from: props.location}}} />}/>
  )
}

预期行为：

authed 通过使用redux-persist 在页面刷新时保持不变 因此，在页面刷新或重新加载时，如果 authed 属性为 true，则路由器应该渲染 <Component /> 而无需转到路径 "/"

问题的实际行为：

使用authed === true（持续） 重新加载页面或刷新页面会导致发生以下操作（选中redux devtools） 那个行动： "@@router/LOCATION_CHANGE" 运行并将其带到正确的安全路线，但随后 "@@router/LOCATION_CHANGE" 再次运行并重定向到 "/" 片刻，最后 "@@router/LOCATION_CHANGE" 再次运行并将路由引导回安全路径，即使 authed === true 通过 redux devtools 中的所有这些

然后： 我的猜测是这个错误与我的主要App 组件渲染有关，redux-persist 有时间重新水化 Redux 存储。

所以我尝试了以下操作：

我尝试延迟我的主要 App 组件渲染，直到我的商店使用 redux-persist 重新补水，如下所示：

  render() {
    const {authed, authedId, location, rehydrationComplete} = this.props
    return (
      <div>
      { rehydrationComplete
       ? <MainContainer>
          <Switch key={location.key} location={location}>
            <Route exact={true} path='/' component={HomeContainer} />
            <Route render={() => <h2> Oops. Page not found. </h2>} />
          </Switch>
      </MainContainer>
      : <div>...Loading </div> }
      </div>
    )
  }

这有效地解决了上述"@@router/LOCATION_CHANGE" 操作运行时路径更改的问题（仅更改路径键），但这会导致React-snapshot 的另一个问题 现在：所有静态生成来自react-snapshot 的html 文件现在只包含...Loading。我尝试在react-snapshot 选项中设置snapshotDelay 的8200，但这并没有解决问题。

那么： 我尝试了以下方法来延迟 React-snapshot 调用，以便在商店重新水化后呈现 html：

import {render as snapshotRender} from 'react-snapshot'
import {ConnectedRouter} from 'react-router-redux'

async function init() {
const store = await configureStore()
snapshotRender(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
)

registerServiceWorker()
}

init()

但现在我得到了错误： 'render' from react-snapshot was never called. Did you replace the call to ReactDOM.render()?

我知道这是一个加载的问题，但我想有效地使用这 3 个库（React-Router V4、Redux-persist、React-snapshot）一起提供受保护的路由而不会出现上述错误。

Answer 1

我有一些和你相似的东西。在这里，我使用 React-Router V4 和一个持久化库。

您的路由器/路由不需要知道持久性。他们应该依赖你的 redux 的 store。持久化应该使用所有数据为您的商店补充水分。

我没有看到您在示例中使用 PrivateRoute 组件的位置。它在哪里？