Accept array as a valid `path` prop for a Route

[lourd]

Since path-to-regexp accepts arrays in addition to strings for the pattern argument, I think it would follow for React Router to be able to accept the prop without issuing a warning. Passing an array for path works fine in the latest beta in terms of matching appropriately, you just get a prop types warning.

This has been brought up before (#4159) and rejected, but I think it's possible with the v4 design. The only question I have looking at the source is how you would approach caching the match. Maybe just not caching if the pattern is an array? Or possibly stringifying the array and using that for the key? I'm not sure what the realized perf difference would be.

[lourd]

Also, I built a route patterns utility a couple weeks ago when tinkering around with this stuff https://lourd.github.io/route-patterns-utility/. You might find it helpful for some interactive feedback on what the input and output to path-to-regexp is.

[vladshcherbin]

Exactly what I needed today.

A simple example of this: a set of exact routes, that have a common part.

const userRoutes = [
  {
    path: '/users/create',
    component: UsersCreate
  },
  {
    path: '/users/:id',
    component: UsersShow
  },
  {
    path: '/users/:id/edit',
    component: UsersEdit
  }
]

const UserRoutes = () => (
  <section>
    {/* Common part */}
    <Route exact path={['/users', ...userRoutes.map(route => route.path)]} component={UsersIndex} />
    {/* Part, that differs */}
    <Switch>
      {userRoutes.map(route => (
        <Route key={route.path} exact path={route.path} component={route.component} />
      ))}
    </Switch>
  </section>
)

Not sure how to prevent the common UsersIndex component from rerendering on route change though. Maybe just use shouldComponentUpdate inside of it 🤔

or this way:

const userRoutes = [
  {
    path: '/users/create',
    component: UsersCreate
  },
  {
    path: '/users/:id',
    component: UsersShow
  },
  {
    path: '/users/:id/edit',
    component: UsersEdit
  }
]

const UserRoutes = () => (
  <Route
    exact
    path={['/users', ...userRoutes.map(route => route.path)]}
    render={() => (
      <section>
        <UsersIndex />
        <Switch>
          {userRoutes.map(route => (
            <Route key={route.path} exact path={route.path} component={route.component} />
          ))}
        </Switch>
      </section>
    )}
  />
)

[timdorr]

@lourd FWIW, I rejected that because it was attempting to make a non-trivial change into a trivial one. This needs changes (and tests!) in other parts of the code to make it work. If someone wants to put together that PR, I'll give it a look.

[pshrmn]

A few thoughts:

1. Caching would need to be changed because it expects the pattern to be a string. A Map would work, but then that would have to be polyfilled.
2. Resolving relative patterns would be slightly more complicated. It would still work, although there wouldn't be a great way to know whether or not to merge in parent params if the array is a mix of relative and absolute paths.
3. path-to-regexp also supports paths that are regular expressions. Should those be supported as well? I think that those would have to be absolute.

[lourd]

@vladshcherbin Glad to hear it's hitting a use case for you!

@timdorr, I understand. What other parts of the code do you suggest looking at aside from that in matchPath?

@pshrmn, yeah I agree on a Map being best suited for a cache. The library could have progressive enhancement for caching, checking for the presence of Map, falling back to an object literal and not caching paths that are arrays.

I'm sure some people have use cases for giving regular expressions as paths, but that functionality doesn't necessarily need to be intertwined in supporting arrays.

[gotbahn]

+1 Yea, it could be a nice feature.
I was looking for a solution to display elements for certain pages. Looping <Route> do the trick, but feels not good at all. Passing array to path looks way better.

[mjackson]

We don't need to support every feature of path-to-regexp. I'd say just map over your routes and generate a <Route> element for each one.

[ryanflorence]

I'm 👎 on this. You can compose to get this API if you want it.

const RouteWithPaths = ({ paths, ...rest }) => (
  <Switch>
    {paths.map(path => (
      <Route path={path} {...rest}/>
    ))}
  </Switch>
)

<RouteWithPaths paths={[ ... ]} component={Whatever}/>

Looping do the trick, but feels not good at all.

Why? Count up how many times you loop over an array and render an element in your app, it's everywhere, it's how React works 😍

[vladshcherbin]

@ryanflorence Okay, here is the use-case:

We have two routes - /users and /users/create.

Out UI is divided into two parts: users list and users create form. We want to always show users list.

If we use this code:

// current proposed routes configuration
const Routes = () => (
  <BrowserRouter>
    <section>
      <ul>
        <li><Link to="/users">users</Link></li>
        <li><Link to="/users/create">users create</Link></li>
      </ul>
      <hr />
      <Switch>
        <Route exact path="/users" render={() => <UsersIndex />} />
        <Route exact path="/users/create" render={() => <UsersIndex />} />
      </Switch>
      <Route exact path="/users/create" component={UsersCreate} />
    </section>
  </BrowserRouter>
)

// UsersIndex component is PureComponent to prevent re-rendering
class UsersIndex extends React.PureComponent {
  render() {
    console.log('render users list')
    return <p>users list component</p>
  }
}

Every time route is changing, the UsersIndex component will re-render because exact prop will trigger different routes. We can't remove exact because we don't want to show it on every page.

If we use an array of routes, re-rendering won't be triggering and it will look cleaner. This is already working, but gives a propTypes warning:

<Route exact path={['/users', '/users/create']} render={() => <UsersIndex />} />
<Route exact path="/users/create" component={UsersCreate} />

[ryanflorence]

Where is the user's list? I think you just want some nesting.

[ryanflorence]

If you want persistent UI, just render it:

const App = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/users">users</Link></li>
        <li><Link to="/users/create">users create</Link></li>
      </ul>
      <Route path="/users" render={({ match }) => (
        <div>
          <UsersIndex/>
          <Route path={`${match.url}/create`} component={UsersCreate}/>
        </div>
      )}/>
    </div>
  </BrowserRouter>
)

[vladshcherbin]

@ryanflorence I tried this, but it will render on all /users routes, for example /users/yolo or smth else.

That is why I want to use exact and looping UsersIndex component with exact makes it re-render, even with shouldComponentUpdate.

[ryanflorence]

do you have any mockups of what your app is supposed to look like at different urls? even some ascii box drawings with http://asciiflow.com/ would be great. The solution will be simple, but I'm not understanding what you want.

[ryanflorence]

Wait:

Every time route is changing, the UsersIndex component will re-render

It's not unmounting, but just re-rendering?