SolidJS•5mo ago

Routing in SolidJS "microfrontend"

Hello, I'm sorry I allowed myself to make another post because I couldn't find how to add pictures to my previous one. I'll start again, perhaps with a better explanation of my issue. I am working on a big app (MyApp on the pictures) which role is to share user connection and navigation between several modules (which are pretty big too, that's why I chose to make them as separate apps). Each module has its own routing, is built and exported as library, and called in MyApp by doing <MyModule ...props />. Since I'm not good with words, I chose to make drawings of the issue 😅 To summarize the issue: I can navigate through my modules in MyApp by clicking on the buttons inside the app (each module's buttons route to the module's different pages). But when I try to access the pages with the browser, I route to MyApp's '/myapp/module1/page1', which doesn't exist in reality (in my example it exists because I made it for test purposes). It's very important to me that we can navigate with the browser, because some of my modules' pages are accessed via external apps for some users. If possible, I'd rather not export every single page of every module to create more routes in MyApp. Is there a way to simply "redirect" from MyApp's route /myapp/module1/page1 to the module1's internal route? Thank you for your time and attention!

7 Replies

Brendonovich•5mo ago

You probably could have just posted the pictures in the previous thread as another message, but since we're here: Something like this might work

export function RootRouter() {
  return (
    <Router>
      <Route path="/myapp">
        <Route path="/module1">
          <Route path="/page1" component={() => <div>This is a test</div>} />
          <Route path="*" component={() => <Module1 base="/myapp/module1" />} />
        </Route>
        <Route path="/module2">
          <Route path="*" component={() => <Module2 base="/myapp/module2" />} />
        </Route>
      </Route>
    </Router>
  );
}

export function Module1(props) {
  return (
    <Router base={props.base}>
      <Route path="/" component={Index} />
      <Route path="/page1" component={Page1} />
      <Route path="/page2" component={Page2} />
    </Router>
  );
}

export function RootRouter() {
  return (
    <Router>
      <Route path="/myapp">
        <Route path="/module1">
          <Route path="/page1" component={() => <div>This is a test</div>} />
          <Route path="*" component={() => <Module1 base="/myapp/module1" />} />
        </Route>
        <Route path="/module2">
          <Route path="*" component={() => <Module2 base="/myapp/module2" />} />
        </Route>
      </Route>
    </Router>
  );
}

export function Module1(props) {
  return (
    <Router base={props.base}>
      <Route path="/" component={Index} />
      <Route path="/page1" component={Page1} />
      <Route path="/page2" component={Page2} />
    </Router>
  );
}

Nyantastic•5mo ago

Thank you! I'm going to try this right away.

Brendan•5mo ago

Although this... https://github.com/solidjs/solid-router/issues/342

GitHub

Nested Router support? · Issue #342 · solidjs/solid-router

Prior to version 0.10 we've used nested <Routes> to (lazily) apply additional routes for customer-specific sections of our apps. The recommendation from 0.10 onwards was to use nested <...

Brendonovich•5mo ago

yea i wasn't entirely sure if it'd work

Nyantastic•5mo ago

Thank you so much for your time guys. I'm sorry I haven't tried yet, I needed to make sure I understood everything and burned out my brain 😅 I'm trying again today, I'll let you know! Thanks again, I really appreciate! @Brendan , I tried your stackblitz example and changed a few things so that looks a bit more that what I currently have (I'm using lazy imports and navigate instead of <A> links). I don't know if it's good practice or not, but I was just curious about the differences of behaviour. With these changes, you don't need to refresh to access the nested home page, but you can access it only once (wtf 😅 i mean when you go back to home or route2, if you click on Nested again you'll have to refresh ). But then you can access the nested route2 by clicking on the link (which is now a button). https://stackblitz.com/edit/solidjs-templates-34vudk?file=src%2Fnested%2Fnested-home.tsx I don't know what to do next. Maybe if we could fix the "can access the nested home only once" thing, we could have something that works? But I don't know how to fix it though EDIT: My bad, I still have the same issue. I can navigate to nested/route2 by clicking on the link, but it matches the parent router's route when I type /base/nested/route2 in the browser. I'm sorry, I don't think this is really useful. After this, I wonder if it's still a good idea to keep trying to implement it this way. What do you think?

Brendan•5mo ago

I think that for now, nested <Router> is never going to work.
The only option with the new router is to lift all the routes to be direct children of the top-level <Router>. In your case you may want to treat navigating to your sub-apps as an external link rather than a route (eg <a href="/module1" target="_self">). In that way it will refresh the whole page in the "new app" and there will still be only one Router (Module 1's). That does mean you can't have some overall layout surrounding all the modules though (at least not created by Solid).

Nyantastic•5mo ago

Thank you! Yes I'm gonna give up the nested router idea. I guess there are several ways to handle this "seamlessly" (if that word even exists). I'm going to try the solution you suggested on monday. Thank you guys, for your time and your help! I would have spent so much time trying to figure this out. I really appreciate!

Gaming

Programming

Routing in SolidJS "microfrontend"