useRoute in nested Router with basepath cannot match absolute path #244

Activity

1. cbbfcd commented on May 9, 2022

   

   cbbfcd

   on May 9, 2022

   Last edited by cbbfcd

   Contributor

   More actions

   @waful i have a doubt, why not distinguish by path, you need to use base? Maybe I didn't understand
2. waful commented on Oct 2, 2022

   

   waful

   on Oct 2, 2022

   Last edited by waful

   Author

   More actions

   @cbbfcd
   Elaborated contrived example:

   <TopLevelRouter>
     <ChildRouter base='/userTypeA'>
       ...
       <Route path='/settings' component={SharedSettingsComponent} />
       <Route path='/otherSharedPage' component={SharedPageComponent} />
       <Route path='/featureA' component={FeatureAComponent} />
       <Route path='/' component={TypeAComponent} />
       ...
     </ChildRouter>
     <ChildRouter base='/userTypeB'>
       ...
       <Route path='/settings' component={SharedSettingsComponent} />
       <Route path='/otherSharedPage' component={SharedPageComponent} />
       <Route path='/' component={TypeBComponent} />
       ...
     </ChildRouter>
   </TopLevelRouter>
   

   I have 2 user types with some shared pages and some type specific pages nested in their respective routers. The settings page for both users are for the most part identical with minor styling/wording changes, so I want to use the same component with a switch flag instead of creating two completely distinct components. I want to be able to identify the nested base route I'm currently in from within SharedSettingsComponent, but the useRoute inside it can only match /settings and not /userType(A|B)/settings. No matter if you're in /userTypeA/settings or /userTypeB/settings you can only match the same path /settings. <Link> handles this today already, you can <Link href='/otherSharedPage'> from inside SharedSettingsComponent and it will go to /userType(A|B)/otherSharedPage based on which ChildRouter you're in, and you can link outside of the current nested base path for example with <Link href='~/userTypeA/otherSharedPage'> even if you're in /userTypeB. But useRoute does not have a similar capability to interact outside of its current nested router context via the ~ prefix.

   EDIT: upon revisiting this problem I wonder if I could just use useRouter and grab router.base for this specific scenario. However this is just another workaround like using window.location.href and the issue remains that useRoute has no way to match absolute route. The useRouter workaround would not work with multiple nested routers because it would only grab the immediate base path and not the full base bath.
3. molefrog

   added

   V3Features that won't be released in v2, but planned for the next major releaseFeatures that won't be released in v2, but planned for the next major release

   on Nov 22, 2023
4. Bonfims commented on Nov 24, 2023

   

   Bonfims

   on Nov 24, 2023

   Last edited by Bonfims

   More actions

   i want made something similar, look exemple:

   function Item({ label, href }) {
     const [match] = useRoute(href)
     return (
        match ? 
           <li className='selected'><Link href={href}>{label}</Link></li> 
              : 
           <li><Link href={href}>{label}</Link></li>
      );
   };
   
   function MainMenu() {
     return (
       <ul>
         <Item label="A" href="section-A" />
         <Item label="B" href="section-B" />
       </ul>
     )
   };
   
   function SubMenu() {
     return (
       <>
         <Item label="1" href="/option-1" />
         <Item label="2" href="/option-2" />
       </>
     )
   };
   
   function App() {
     return (
       <Router>
         <MainMenu />
         <Switch>
           <Route path="/section-A">
             <NestedRouter base="/section-A">
               <SubMenu />
               <Switch>
                 <Route path="/option-1">
                   <h1>Option 1 from Section A</h1>
                 </Route>
                 <Route path="/option-2">
                   <h1>Option 2 from Section A</h1>
                 </Route>
               </Switch>
             </NestedRouter>
           </Route>
           <Route path="/section-B">
             <NestedRouter base="/section-B">
               <SubMenu />
               <Switch>
                 <Route path="/option-1">
                   <h1>Option 1 from Section B</h1>
                 </Route>
                 <Route path="/option-2">
                   <h1>Option 2 from Section B</h1>
                 </Route>
               </Switch>
             </NestedRouter>
           </Route>
         </Switch>
       </Router>
     )
   };
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
       <App />
     </React.StrictMode>
   )
   

   The NestedRouter is from example on docs.

   So what i want is that my Item component can figure out if he is a selected item by useRoute, on first level it works, but on the others doest.

   If i have selected a item on MainMenu, he become selected, but if i select another item on SubMenu, the previous selected item become unselected. Thinking that current selected item from SubMenu is inside a nested router, the item on MainMenu need be selected too, but useRoute doesnt match.

   /section-A -> only MainMenu item is selected and its OK.
   /section-A/option1 -> item from MainMenu is unselected and only SubMenu item is selected, but i think that is a wrong.

   I think that useRoute called inside Item from MainMenu should match with href /section-A/option-1, by the routing structure.

   I figure out how to work around, with:

   const [match] = useRoute(href + "/:any*");

   So the Item component became:

   function Item({ label, href }) {
     const [match] = useRoute(href + "/:any*");
     return (
        match ? 
           <li className='selected'><Link href={href}>{label}</Link></li> 
              : 
           <li><Link href={href}>{label}</Link></li>
      );
   };
   

   Now he matches with base path froim nested router and routes on sub menu.
5. molefrog

   removed

   V3Features that won't be released in v2, but planned for the next major releaseFeatures that won't be released in v2, but planned for the next major release

   on Mar 4, 2024
6. molefrog

   added a commit that references this issue on Sep 5, 2026

   fix: support absolute useRoute patterns across bases (#244)

   2c400c4
7. molefrog

   closed this as completedin #570on Sep 5, 2026
8. molefrog commented on Sep 5, 2026

   

   molefrog

   on Sep 5, 2026

   Owner

   More actions

   Fixed in #570. useRoute("~/...") now matches the full path, including inside nested routers.