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

Question

我正在使用 React Router 实现私有(private)路由 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 Prop 是 true那么路由器应该呈现 <Component />从来没有去路径 "/"

问题所在的实际行为:

与 authed === true (坚持)重新加载页面或刷新页面会导致发生以下操作(选中 redux devtools )那个行动: "@@router/LOCATION_CHANGE"运行并将其带到正确的安全路线，然后 "@@router/LOCATION_CHANGE"再次运行并重定向到 "/"片刻，终于 "@@router/LOCATION_CHANGE"再次运行并将路由引导回安全路径，即使 authed === true通过这一切在 redux devtools

然后: 我猜这个错误与我的主 App 有关redux-persist 之前的组件渲染有时间重新调整 Redux store。

所以我尝试了以下操作:

我试着延迟我的主要 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 .我试着设置 snapshotDelay的 8200在react-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)一起为 protected 路由提供服务，而不会出现上述错误。

Answer 1

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

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

我没有看到您在示例中的什么地方使用了 PrivateRoute 组件。它在哪里？