SolidJS•3mo ago

using id on route and named route breaks

Hello ! I experience an issue with my router where the /:id/@me/ route gets ignored and only the /:id/:guild_id/ route gets mounted when I navigate to http://localhost:1420/123456789123456789/@me (as example)

<Router>
  <Route path="/" component={AuthView} />
  <Route path="/:id" component={AccountLayout}>
    <Route path="/@me" component={PrivateDMLayout}>
      <Route path="/" component={() => <p>Hello World</p>} />
      <Route path="/friends" component={FriendsView} />
      <Route path="/:channel_id" component={ChannelView} />
    </Route>

    <Route path="/:guild_id" component={GuildLayout}>
      <Route path="/:channel_id" component={ChannelView} />
      <Route path="/" component={Account404} />
    </Route>
  </Route>
</Router>

<Router>
  <Route path="/" component={AuthView} />
  <Route path="/:id" component={AccountLayout}>
    <Route path="/@me" component={PrivateDMLayout}>
      <Route path="/" component={() => <p>Hello World</p>} />
      <Route path="/friends" component={FriendsView} />
      <Route path="/:channel_id" component={ChannelView} />
    </Route>

    <Route path="/:guild_id" component={GuildLayout}>
      <Route path="/:channel_id" component={ChannelView} />
      <Route path="/" component={Account404} />
    </Route>
  </Route>
</Router>

Any idea why it doesn't work ? I couldn't find anything in the documentation related to my case and I'm kinda lost to be honest. Thanks you in advance !

9 Replies

Madaxen86•3mo ago

Did you try with just /me without the @. I got a feeling that this might cause problems.

VexcitedOP•3mo ago

this works ! wonder how i can make it work with the @ now...

Madaxen86•3mo ago

I don’t know if this will work. It will probably encoded by the browser to %40 or something like that. So it won’t show in the browser anyways. What’s the point of having the @ in there?

VexcitedOP•3mo ago

I'm writing a Discord client and I'm trying to match their structure and the @me is their identifier for the user's personal "guild" (basically private DMs) would be kinda sad to use /me instead of /@me because of the router not capable of it

Madaxen86•3mo ago

Funny thing. When using useLocation().pathname returns '/@me' so what you can do is make a catch all route like

<Route path="*404" element={<NotFound />} />

<Route path="*404" element={<NotFound />} />

And inside the NotFound

const location = useLocation()
return <Show when={locations.pathname === "/@me"}
fallback="404 Not found">
   <Profile />
</Show>

const location = useLocation()
return <Show when={locations.pathname === "/@me"}
fallback="404 Not found">
   <Profile />
</Show>

And then open an Github issue in the @solid/router package

VexcitedOP•3mo ago

wouldn't it also catch up with the :guild_id one ?

VexcitedOP•3mo ago

Madaxen86•3mo ago

Maybe you can also do something with the matchFilters prop. But this is not documented yet. Maybe @Brendonovich know how to use it? True... hm, I'm out of ideas. Look at this chat. Probably matchFilters is the way https://discord.com/channels/722131463138705510/910635844119982080/1149079674476052520

VexcitedOP•3mo ago

thanks you ! this was the way I did

<Route path="/:me" component={PrivateDMLayout} matchFilters={{ me: /^@me$/ }}>

<Route path="/:me" component={PrivateDMLayout} matchFilters={{ me: /^@me$/ }}>

instead of

<Route path="/@me" component={PrivateDMLayout}>

<Route path="/@me" component={PrivateDMLayout}>

and it works perfectly !

Gaming

Programming

using id on route and named route breaks