Redwood Router with layouts, context providers, etc

That would be expanded to

<Route path="/admin/users/new" page={AdminNewUserPage} name="adminNewUser" />
<Route path="/admin/users/{id:Int}/edit" page={AdminEditUserPage} name="adminEditUser" />
<Route path="/admin/users/{id:Int}" page={AdminUserPage} name="adminUser" />
<Route path="/admin/users" page={AdminUsersPage} name="adminUsers" />

Looks like that could even be done at compile time, right? Using babel.

Only thing that stands out to me is the names. To “expand” to those routes, the scaffold would actually be called “adminUser”, right? And, since the actual page names are never shown anywhere when using your shorthand route, it might be a bit difficult for (new) users to know what name to use when linking directly to e.g. the edit user page, like <Link to={routes.adminEditUser()}>Edit User</Link>

I assume so, but are there drawbacks to that? If we ever released Redwood Router as its own separate package that you can add to any React app, does that make the integration more difficult?

I assumed it could work the same way that <Private> does, where is just adds more attributes to a regular <Route> (although it would also need to inject 3 additional routes, not sure about the feasibility of that).

For sure. We could help by displaying the routes and associated names after you run the scaffold generator (and maybe include a flag if you want the full route from the get-go):

User scaffold generated! To reference your routes by name:

  /admin/users -  List of all users
    routes.adminUsers()

  /admin/users/1 - Detail for a single user
    routes.adminUser({ id: 1 })

  /admin/users/new - New user form
    routes.adminNewUser()

  /admin/users/1/edit - Edit user form
    routes.adminEditUser({ id: 1 })

If you'd rather have the full routes written to your Routes.js 
file, use the `--verbose-routes` flag.

We could also include a comment above the shorter <Route> right in the Router file that links to a quick doc about naming conventions.

It ends up being a simple naming convention so once you have it described to you (and throughly documented) I think people will get it. Rails has had this forever and I don’t remember seeing any blow back in the community.

1 Like

Hah! And here I was thinking "Why isn’t <Private> done with babel as well?!

The main reason to do it with babel would be to not spend cpu cycles doing it (over and over again) at runtime. But yeah, as with everything related to optimizations - should measure first!

React.createElement is the answer to that I think.

Update

Tom, Peter, Rob, and I had a solid discussion about this today and agree it’s ready for moving to implementation of a POC with goal to resolve fully for v1. :rocket:

Next Steps

  • Peter is creating a GitHub Issue to outline decisions (from this thread and today’s discussion), plan, and next steps. The conversation should move from here to the Issue when it’s posted.
  • Tobbe has confirmed he’d like to take lead on implementation in coordination with Peter.
  • Go Team :rocket:

And huge thanks to everyone who helped get us this far. This is a critical piece to complete for v1.

1 Like

@Tobbe Updated the code example in Redwood Router with layouts, context providers, etc to reflect what we talked about in our meeting. It shows two ways to pass props to your Layout, one creating a standalone function and the other doing it inline:

const DarkLayout = (props) => {
  return <AppLayout {...props} theme="dark" />
}

<Router>
  <Set wrap={[MarketingLayout, HeaderLayout]}>
    <Route path="/home" page={HomePage} />
    <Route path="/pricing" page={PricingPage} />
  </Set>

  <Private unauthenticated="home">
    <Set wrap={[AdminContext, DarkLayout]}>
      <Route path="/admin/users" page={UsersPage} />
      <Route path="/admin/posts" page={PostsPage} />
    </Set>

    <Set wrap={(props) => <AppLayout {...props} theme="light" />}>
      <Route path="/utility" page={UtilityPage} />
    </Set>
  </Private>

  <Route notfound={NotFoundPage} />
</Router>
1 Like

If we’re still using this as the Router RFC, can I request a redirect prop? Otherwise we have to have a page who’s only purpose is to redirect somewhere else: https://redwoodjs.com/docs/redwood-router.html#redirect

I’d love a <Route path="/old-path" redirect="/new-path" />

2 Likes

Seems there already is code for this

Unfortunately it appears to be broken. I’ll see if I can fix it when I rewrite the router.

1 Like