Add parameter route string to routes object.

[dennemark]

Adds a property path to routes object.
Route can still be called via routes.myRoute({ id: 1 }) giving an exact string like /myRoute/1. Alternatively we can get the parameter string via routes.myRoute.path: /myRoute/{id: Int}.

Also documents use of routes within useMatch.
Now it is convenient to match a given parametric route: useMatch(routes.myRoute.path).

Alternative would be, to call routes.myRoute() without any parameters, to get the original path. Not sure what is preferable.

The approach has one limitation though. If we have two routes with similar parameters, useMatch will be true for both of them. I added tests, too, but commented them, since they would fail for what we expect.

<Route path="/{dynamic}/{path}" page={MyPage} name="home" />
<Route path="/{another}/{path}" page={MyPage} name="anotherHome" />

Hope it suits redwood well!

[Tobbe]

Thanks for the PR! I'm always excited for new router related features 🙂
Will have to take a close look later.

In the meantime, could you give a more detailed use case for this? How/where/why would you be using it?

[replay-io]

16 replays were recorded for ece7b76.

0 Failed

16 Passed

requireAuth graphql checks

locator.waitFor: Target closed
=========================== logs ===========================
waiting for locator('.rw-form-error-title').locator('text=You don\'t have permission to do that') to be visible
============================================================

• useAuth hook, auth redirects checks
• Check that tags are rendering the correct dynamic data
• Check that a specific blog post is prerendered
• Check that about is prerendered
• Check that homepage is prerendered
• Check that you can navigate from home page to specific blog post
• Waterfall prerendering (nested cells)
• RBAC: Admin user should be able to delete contacts
• RBAC: Should not be able to delete contact as non-admin user
• Smoke test with dev server
• Smoke test with rw serve
• Loads Cell mocks when Cell is nested in another story
• Loads Cell Stories
• Loads MDX Stories
• Mocks current user, and updates UI while dev server is running

View test run on Replay ↗︎

[dennemark]

Specifically, I have this navbar, with four dynamic routes.

Each of them takes the same project parameter and its quite in the beginning of the url. So I do something like:

const Navbar () => {
  const { project } = useParams()
  const modes = [
    {
      name: "Info",
      route: routes.info({ project }),
      match: useMatch("/{project}/info").match,
    },
    {
      name: "Compare",
      route: routes.compare({ project, id: "1" }),
      match: useMatch(routes.compare.path).match,
    },
    // ...
  ]

  return (
    <>
      {modes.map((x) => <Button as={Link} to={x.route} isActive={x.match} />)}
    </>
  )
}

You can see in the example two different versions of match. I prefer the second one, since I use the same routes object and don't need to keep <Route path="/..."> and useMatch("/...") in sync.

[Tobbe]

Vielen Dank für das Beispiel.
"dont need to keep and useMatch("/...") in sync." This is a really strong reason for doing this. I'm sold 😃 Let's try to get this merged.

This adds to the public "api" of Redwood, so I want to get the team's input on syntax and stuff. I'll try to ask next week

[Tobbe]

@dennemark We talked about this one on our Core team meeting.
People didn't love routes.myRoute.path. It felt strange to access a property on a method like that. It's not something we do in the framework in other places.

We all agreed your use case makes sense though. Just wondering if there is another way we could help you solve it. Can we give you better tools to make this easier for you? So you don't manually have to compare raw strings.

But even if we do write a better/another useMatch or something like that, getting the raw path from the route is a reasonable ask. Another thing people have asked for before is "How can I get the name of the current route I'm on?". Could we come up with something that solves both those feature requests?

[dennemark]

Would this be an alternative? Call routes.myRoute() without any parameters, to get the original path. Or write routes.myRoute(true) or something like it?
I don´t think something like routes.myRoute({originalPath: true}) would be good.
If you decide on a preference, I am up for implementing it!

[Tobbe]

@dennemark We discussed this PR again today. Currently leaning towards this syntax. Please let us know what you think

<Route path="/{dynamic}/{path}" page={ExamplePage} name="example" />

routes.example({ dynamic: 'dog', path: Param.ANY })
// => '/dog/{path}'

routes.example({ dynamic: Param.ANY, path: Param.ANY })
// => '/{dynamic}/{path}'

(Param would be a new object created just for the ANY constant)

Another possibility is routes.example({ dynamic: routes.ANY, path: routes.ANY }). We're also not super happy with ANY, but couldn't come up with anything better right now.

[jtoar]

Per conversation with @thedavidprice, @Tobbe and I will take lead on the design decisions for this one. @dennemark are you still interested in working on this? Please see Tobbe's last comment above

[dennemark]

@jtoar you can count me in.
So far we have these options:

1.  routes.example({ dynamic: 'dog', path: Param.ANY })
    // => '/dog/{path}'
   

   • ➕ mix of dynamic and defined paths
   • ➖ new variable Param needs to be imported

   I can't think of a better way to avoid the import of Param, since I guess booleans are taken already for routing.
   Or is it possible to place param.Any somehow on the routes object?
   routes.example({dynamic: 'dog', path: routes.ParamAny})

2. routes.myRoute.path: /myRoute/{id: Int}

   • ➕ fast to reach, since no import is needed?
   • ➖ only full dynamic path
   • ➖ mixture of function and variable on myRoute object

3. optional parameters?
   3.1 routes.example({dynamic: 'dog'}, {path: "dynamic"})
   3.2 routes.example({dynamic: 'dog'}, ["path"])

   • ➕ no additional import
   • ➖ typing might be inconvenient?

[Tobbe]

@jtoar you can count me in.

Awesome! 🙂

optional parameters?
3.1 routes.example({dynamic: 'dog'}, {path: "dynamic"})
3.2 routes.example({dynamic: 'dog'}, ["path"])

• no additional import
• typing might be inconvenient?

Adding a second parameter to the function was also considered in #8069 for adding #<some-anchor> to the end of the generated URL. Now, it doesn't sound like we're going to do it that way, so no conflict. But wanted to mention it as semi-related. It was also voted down as bad DX, which we might want to consider as input here as well.

[dennemark]

So we stick to variant 1
but need to decide on
1.1

import { Param, routes } from ...

routes.example({dynamic: 'dog', path: Param.ANY})

or
1.2

import { routes } from ...

routes.example({dynamic: 'dog', path: routes.ParamAny})

right?

[Tobbe]

@jtoar and I have a meeting scheduled later today. I'll make sure we discuss this PR.

Another option I just came up with, that might be more clear than "any" is Param.AsDefined or routes.AsDefined. As in "The parameter as it's defined in Routes.tsx", e.g. {id:Int} or {project}. It's more clear what it is, but probably less clear how it's supposed to be used...

[jtoar]

Hey @dennemark, @Tobbe and I settled on RouteParams.LITERAL:

import { routes, RouteParams } from `@redwoodjs/router

routes.example({ dynamicParameter: 'dog', literalParameter: RouteParams.LITERAL })

We don't want to attach any more properties to routes because they could conflict with the dynamic properties on routes. (While it's unlikely anyone names a route LITERAL or some variant, we've run into naming collisions in other API surfaces we didn't expect before.)

I'm not sure if you need a Symbol for RouteParams.LITERAL. Maybe not, but it'd be a cool use case. Does this all sound good? And @Tobbe did I get this all right?

[Tobbe]

Yes, looks good to me 🙂

[jtoar]

Hey @dennemark, were you still interested in this one? No pressure, just didn't want it to get lost

[dennemark]

Hey @dennemark, were you still interested in this one? No pressure, just didn't want it to get lost

Hey! Yes i still have it on my list. But these days its not easy to find time...

[Tobbe]

@dennemark Thanks for checking in. No rush on getting it done. But do let us know if you want us to finish it up for you

[dennemark]

@Tobbe @jtoar can you have a look at the latest commit? Test works out. Hope it is how you imagine it. I am just not sure if RouteParams.LITERAL is exported properly so it will be visible in the package later on.

[Tobbe]

@dennemark Thanks for sticking with this one 🙂

I rewrote your test a little bit, and added a few new test cases to the test. One of the new ones is failing. I'll discuss it with Dom on Monday.

[Tobbe]

@dennemark I took another approach to how we could handle your use case. Let me know what you think! 🙂

See here: #9774

[Tobbe]

Closing this one in favor of #9793