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>
);
}