Array
(
[2017-09-23] => Array
(
[max_pricing] => 9.5470
[lowest_pricing] => 9.5470
[total_of_totals] => 238.675
[first_timestamp] => Array
(
[value] => 1506169387000
[pricing] => 9.5470
)
[last_timestamp] => Array
(
[value] => 1506169387000
[pricing] => 9.5470
)
)
[2017-09-22] => Array
(
[max_pricing] => 9.6300
[lowest_pricing] => 8.6800
[total_of_totals] => 1292.287
[first_timestamp] => Array
(
[value] => 1506093083000
[pricing] => 9.6300
)
[last_timestamp] => Array
(
[value] => 1506065258000
[pricing] => 8.7100
)
)
)
组件实现私有路由：Routefunction 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有时间重新补充Redux商店之前，此错误与我的主App组件呈现有关。
所以我尝试了以下操作：
我尝试延迟我的主redux-persist组件渲染，直到我的商店使用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的所有静态生成的html文件现在只包含react-snapshot。我尝试在...Loading选项中设置snapshotDelay 8200，但这并没有解决问题。
，然后：
我尝试了以下内容来延迟react-snapshot调用，以便在商店重新水化后呈现html：
React-snapshot 但现在我收到了错误： 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()
我知道这是一个已加载的问题，但我希望有效地将这3个库（React-Router V4，Redux-persist，React-snapshot）一起用于提供受保护的路由而不会出现上述错误。
答案 0 :(得分：0)
我有类似的东西。在这里，我使用React-Router V4和类似persist的库。
您的路由器/路由不需要知道持久性。他们应该依靠你的redux商店。坚持者应该使用所有数据为您的商店补充水分。
我没有看到您在示例中使用PrivateRoute组件的位置。它在哪里？