Is it possible to use different query param in different components (by router)

[Gumichocopengin8]

I currently use React-router-dom for router library, and I wanna use different query params in different path.
For example,

• if im on /home, I wanna use <RecoilURLSyncJSON storeKey="home-url" location={{part: 'queryParams'}}>
• If I'm on /book, I wanna use <RecoilURLSyncJSON storeKey="book-url" location={{part: 'queryParams'}}> etc.

According to the doc, RecoilURLSyncJSON should be located in root, but is it possible to local it in components? If no, are there any way to do this?

Router.tsx

<BrowserRouter>
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/home" element={<Book />} />      
    </Routes>
  </BrowserRouter>,

Home.tsx

const Home = () => {
   return (<RecoilURLSyncJSON storeKey="home-url" location={{part: 'queryParams'}}>
    <div>Home!!></div>
    // ... button etc 
  </RecoilURLSyncJSON>)
}

export default Home

Book.tsx

const Book = () => {
   return (<RecoilURLSyncJSON storeKey="book-url" location={{part: 'queryParams'}}>
    <div>Book!!></div>
    // ... button etc 
  </RecoilURLSyncJSON>)
}

export default Book

Both Home and Book query params behave differently even though there are the same key (atom) name.

[drarmstr]

It should be the ancestor of all components which use the synced atom. So, you could provide different <RecoilURLSyncJSON> components in different routes. Also, since your example has different storeKey's, they can also both co-exist if necessary.

[Gumichocopengin8]

Thank you. That's helpful information.