Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs]: RR7 lazyRouteDiscover (Fog of War) opt-out #12656

Open
mikkpokk opened this issue Dec 29, 2024 · 3 comments
Open

[Docs]: RR7 lazyRouteDiscover (Fog of War) opt-out #12656

mikkpokk opened this issue Dec 29, 2024 · 3 comments
Labels

Comments

@mikkpokk
Copy link

mikkpokk commented Dec 29, 2024

Missing information how to disable lazy route discover (also known as Fog of War) feature.

In my case, it causes unnecessary overhead on application which renders thousands of links (filters and products) but there are only 7 RR routes in total. Would love to disable the feature.

@mikkpokk mikkpokk added the docs label Dec 29, 2024
@mikkpokk mikkpokk changed the title [Docs]: RR7 lazyRouteDiscover [Docs]: RR7 lazyRouteDiscover (Fog of War) opt-out Dec 29, 2024
@s-abstract
Copy link

Same here. Would love to see a way to opt out the feature or configure it.

@david-szabo97
Copy link

We need more control over Fog of War. I noticed the same issue, we have a search results page where each result is a different link. React Router fetches a manifest for all the links, but it's just a single route with parameters. It would be great to have some way to exclude links from discovery and just use whatever is already loaded.

The initial manifest only contains the matched routes. Therefore a manifest is always fetched on page load. We should have an (optional) option to eagerly load those as well.

@mikkpokk
Copy link
Author

mikkpokk commented Jan 7, 2025

I digged a bit deeper in source code and it seems there is only 1 solution - use discover={'none'} property value on NavLink / Link component on most of the links and let FOW to do it's thing on single route link only.

For an example

// Main navigation
<Link to={'/'}>Home</Link>
<Link to={'/products'}>Products</Link>
<Link to={'/login'}>Login</Link>
<Link to={'/register'}>Register</Link>
...
// Filters
<Link to={'/products?color[]=blue'} discover={'none'}>Blue</Link>
<Link to={'/products?color[]=red'} discover={'none'}>Red</Link>
<Link to={'/products?color[]=red&color[]=blue'} discover={'none'}>Blue</Link> // in case red is active already
<Link to={'/products?color[]=blue&color[]=red'} discover={'none'}>Red</Link> // in case blue is active already

// Pagination
<Link to={'/products?page=2'} discover={'none'}>2</Link>

// Products
{items.map((item, key) => (
    <Link to={`/products/${item.slug}`} discover={'none'}>
        <ProductCard item={item} discover={key === 0 ? 'render' : 'none'} />
    </Link>
))}

However, it gets really messy and hard to maintain such a mayhem project in the future. Let's hope to hear authors thoughts soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants