Router parameters

[Warry]

Hi there !

I'm toying around in Deno with the build-in router (using SSR) and I'm wondering how I could get the route parameter values ?

        <Router.Switch>
          <Router.Route exact path="/">
            <ReportsList />
          </Router.Route>

          <Router.Route path="/reports/:id">
            <Report />
          </Router.Route>
        </Router.Switch>

export const Report = (a?:any) => {
  console.log("passed params", a)
  return <div>
    <h1>Report</h1>
  </div>
}

visiting /reports/abcdefg the log is printing:

passed params { children: [], route: { path: "/reports/:id", regex: undefined } }

Hoping someone could give me some pointers to look at. Thanks !

[yandeu]

Have you passed the route via renderSSR(<App />, { pathname: '/reports/12345' })?

Maybe you can access globalThis._nano.location or just _nano.location?

[Warry]

I did indeed passed the pathname, the component is rendered correctly actually.

I'm assuming from what you're saying that I cannot retrieve the parameter :id from the context ? I have to parse again the route ?

I was expecting to have something like :

{ children: [], route: { rule: "/reports/:id", path: "/reports/abcdefg", parameters: { id : 'abcdefg' } } }

Would this be pull request material, that you'd be willing to merge ? (I can totally build my own Router component otherwise, it's fine)

[yandeu]

I see, there is already a function for parsing it:

nano/src/components/router.ts

Line 240 in 91fb7de

export const parseParamsFromPath = (path: string): { [param: string]: string } => {

Feel free to add the parsed pathname and params to props.path.

Probably something like { path: "/reports/:id", pathname: "/reports/abcdefg", params: { id : 'abcdefg' } } }?