Skip to content

Instantly share code, notes, and snippets.

@mjackson
Last active Oct 15, 2019
Embed
What would you like to do?
let routes = (
<RankedSwitch>
{/*
<RankedSwitch> picks the best child <Route> that matches
the path. Like <Switch>, it does not match deeply, so you
need to use /* on the path if you want to do that. Like
@reach/router's <Router>, it ranks the paths so you don't
have to think about ordering.
Con: You have to use /* to do deep matching
Pro: You don't have to put all your <Route>s in the same
owner, just need to use a `path` prop on children (huge IMO)
*/}
<Route path="courses/*">
<Courses>
{/*
Layout components render their children, which may be a
<RankedSwitch> if you want to do another level of matching.
Con: ???
Pro: Build your layouts naturally, using children
Pro: No need for <Outlet>
*/}
<RankedSwitch>
<Route path="react-fundamentals">
<ReactFundamentalsCourse />
</Route>
<Route path=":course">
<Course />
</Route>
</RankedSwitch>
</Courses>
</Route>
<Route path="courses/new">
<PublicLayout>
<NewCourse />
</PublicLayout>
</Route>
<Route path="support">
<Support />
</Route>
</RankedSwitch>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment