Skip to content
This repository has been archived by the owner on Dec 15, 2018. It is now read-only.

How to match child route and parent sibling <Fragment>s simultaneously #285

Open
granmoe opened this issue Apr 26, 2018 · 2 comments
Open

Comments

@granmoe
Copy link

granmoe commented Apr 26, 2018

<Fragment forRoute="/foo/bar">
  <SomeComponent/>
</Fragment>
<Fragment forRoute="/foo">
  <Fragment forRoute="/foo/bar">
    <SomeOtherComponent />
  </Fragment>
  <Fragment forRoute="/foo/baz">
    <YetAnotherComponent />
  </Fragment>
</Fragment>

There currently is no way to show the first /foo/bar Fragment and the nested /foo/bar Fragment at the same time. We ended up using a hacky solution of looking at the router state in connect in order to determine what page we're on, and then using this to conditionally show the appropriate UI for that route in the equivalent of the first /foo/bar Fragment in our code. It would be nice to have some kind of wildcard match sort of like /foo/:childRoute that would be able to be matched simulataneously with /foo/bar, but I'm not sure if such a thing exists based on the documentation.

@gertsonderby
Copy link
Contributor

gertsonderby commented Jul 3, 2018

Fragments nest their routes, so you'd want a structure more like this:

<Fragment forRoute="/foo/bar">
  <SomeComponent/>
</Fragment>
<Fragment forRoute="/foo">
  <Fragment forRoute="/bar">
    <SomeOtherComponent />
  </Fragment>
  <Fragment forRoute="/baz">
    <YetAnotherComponent />
  </Fragment>
</Fragment>

That should work, I think. All else failing, of course, there's withConditions, which I've used as an escape hatch a couple times for odd routing needs.

@granmoe
Copy link
Author

granmoe commented Jul 4, 2018

Interested...I was able to get that to work in codesandbox

You may have just solved our problem and eliminated this chunk of tech debt for us :-) Will try this at work soon and close this issue if it works. Thank you!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants