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.
Link
supports a custom class name when the current location's pathname matches
the Link
's own to
property value. If the Link
directs to the current
active location pathname, it will use the activeClassName
property.
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="/" activeClassName="active">
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>
);
}