React PWA offline support not working on sub URLs

I am working on a PWA which has multiple URLs using reactjs and workbox , My app is working correctly online and offline but if the user is offline and hit the refresh button other than the root URL then the little dinosaur shows up.

I tried to cache the all URLs dynamically by using the following code

workbox.routing.registerRoute(
new RegExp('/'),
workbox.strategies.cacheFirst({
    cacheName: 'dynamic-URLs',
    plugins: [
        new workbox.expiration.Plugin({
            maxEntries: 50
        })
    ]
}));

it is working and caching the URLs but only after i refresh the page on a particular URL

can someone help me with this issue , or is there any other way to handle this kind of problem

Here is the screenshot of my app's log after offline refreshing