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

Question

我正在使用React Router RouteComponent 实现私有路由:

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 So页面刷新或重新加载来保持页面刷新,如果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-snapshotNow的所有静态生成的html文件仅包含...Loading.我尝试在选项中设置snapshotDelay,但没有解决问题.8200react-snapshot

然后: 我尝试了以下延迟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 的商店。持久化应该用所有数据来补充您的存储。

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