React Router: Exclude strings from generic `/:slug` path

user_438581 0
Viewed 358

I'm attempting to setup the following UI based on routes

  • /things/ - display the list of items (Component A)
  • /things/new - display the list of items, with a modal form overlay (Component A and Component B)
  • /things/:slug - display a specific item (Component C)

With this setup:

  • /things/ would display Component A
  • /things/new would display Component A AND Component B
  • /things/:slug would display ONLY Component C

This is all in a nested route - /things. Which means the path from useRouteMatch returns /things

I have tried several combos with Switch, and attempted to use matchPath and useRouteMatch to differentiate /new from /:slug but with no luck. Every attempt results in one of the paths not returning the correct component.

For example:

<Switch>
  <Route path="/:slug(exclude "new")" exact component={ComponentC} />
  <Route path="/" exact component={ComponentA} />
</Switch>
<Route path="/new" component={ComponentB} />

Another option I've tried with no luck is to use regex on the slug, to match the slug pattern. Let's says the slug pattern is xxx-xxx-xxx-###, then I tried:

<Route path="/:slug((\w*-)*(\d*))" component={ComponentC) />

but this doesn't match the routes for some reason.

I'm thinking I could use location.pathname but this seems like a hack.

Is it possible to match and render routes as described above with standard <Route path="[something]" /> components with this setup?

react-router-v5 react-router-dom react-router reactjs
1 Answers

This is why I love Stack Overflow. Asking the question often leads you to answer it yourself.

I was browsing the React Router docs for info on the regex and discovered the Route path property can accept an array of paths. So I went with this:

const { path } = useRouteMatch()

<Route path={[path, `${path}/new`]} exact component={ThingsList} />
<Switch>
  <Route path={`${path}/new`} render={() => <NewThing path={path} />} />
  <Route path={`${path}/:slug`} render={() => <Thing path={path} />} />
</Switch>
user_4385810
Related