我正在使用 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 路由提供服务,而不会出现上述错误。
最佳答案
我和你有相似之处。在这里,我使用 React-Router V4 和一个类似持久化的库。
您的路由器/路由不需要知道持久性。他们应该依赖于你的 redux 商店。 persist 应该使用所有数据为您的商店补充水分。
我没有看到您在示例中的什么地方使用了 PrivateRoute 组件。它在哪里?
关于javascript - React Router V4 使用 Redux-persist 和 React-snapshot 保护私有(private)路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46385860/