Two simple concepts: <Scene>
and <View>
npm install @ryancole/scenic
Scene
Scene
places history
on to context
. You must provide Scene
with
history
via props. On the server, you would likely provide history
created
via createMemoryHistory
. On the client, you would likely provide history
created via createBrowserHistory
.
View
View
compares the current location pathname
with its own path
prop. If any
of the path
prop values match the current location pathname
, then the
children of View
will be rendered. The path
prop may be a string
or an
array of string
.
Alternatively, specifying a not
prop will cause View
to render only if the
current location pathname
does not match any of the values of the path
prop.
If a value in the path
prop begins with /
, matching with pathname will begin
at the beginning of pathname. If the value of the path
prop does not begin
with /
, matching with pathname will begin at the end of pathname.
Link
Link
is a convenience component for pushing to history
location.
Example
import createHistory from "history/createBrowserHistory";
import createHistory from "history/createMemoryHistory";
const history = createHistory();
function Application() {
return (
<Scene history={history}>
// utility Link component.
<Link to="/">
Home
</Link>
// straight forward, single path match. matching will begin at the
// *beginning* of the location pathname.
<View path="/team">
<Teams />
</View>
// straight forward, single path match with parameters. children
// will receive `id` as a prop.
<View path="/team/:id">
<Team />
</View>
// single path match. matching will begin at the *end* of the
// location pathname.
<View path="create">
<CreateTeam />
</View>
// single path match that will only render while the current
// location pathname does not match `/foo`.
<View not path="/foo">
<h1>Bar is best</h1>
</View>
// multiple path match that will only render while the current
// location pathname matches any of the provided `path` values.
<View path={["/foo", "/bar"]}>
<h1>Bar is best, but Foo is welcome</h1>
</View>
// multiple path match that will only render while the current
// location pathname does *not* match any of the provided `path`
// values.
<View not path={["/foo", "/bar"]}>
<h1>404</h1>
</View>
</Scene>
);
}
Notice
I have no idea if this approach is solid or not. I'm shooting for something that
works well on both the server and client. I'm also shooting for something that
does not require multiple renders on the server. I'm also shooting for something
that "just works".
That's a lot of shooting.