'How do I delay rendering website until redux rehydrated?

I use redux persist, if I delete the persist and refresh the website, the website crash but if I refresh the website again, it works. The website is rendering at the same time as persist rehydrate the redux. I search around and people say to use persistgate, I'm not sure if I am using it right, but it's not working.

**index.js**

let persistor = persistStore(store);

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);



**store.js**

const reducers = combineReducers({
    property: propertyReducer,
    user: userReducer,
    auction: auctionReducer,
    registProperty: registPropertySlice
});

const persistConfig = {
    key: 'root',
    storage,
    whitelist: ['property', 'auction'],
};

const persistedReducer = persistReducer(persistConfig, reducers);

const store = configureStore({
  reducer: persistedReducer,
  middleware: [thunk]
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source