Routes
Route
Showing a component if the location matches a certain path is done with a Route
component. It takes a path
prop and either a component
prop or children.
export const Component = () => (
<div>
<Route path="/news" component={News} />
<Route path="/fakenews">Drumpf</Route>
</div>
);
Beware: If multiple routes have a matching path, all will be shown. Use a Switch
component if that's not desired.
As you can see, it's possible to specify a component to render or normal children.
You can even use a callback instead of children like this:
export const Component = () => (
<Route path="/foo/:id">{(params: { id: string }) => <div>Bar {params.id}</div>}</Route>;
);
See further below for the the possibility of using parameters.
Switch
If you only want the first Route
that has a matching path to be shown, you can use a Switch
:
export const Component = () => (
<Switch>
<Route path="/news" component={News} />
<Route path="/fakenews" component={FakeNews} />
{/* use "(.*)" instead of "*" if you use path-to-regexp */}
<Route path="*" component={Otherwise} />
</Switch>
);
Note: The path pattern for the "Otherwise" Route differs depending on your route matching algorithm. With the built-in simpleRouteMatcherFactory
you would use "*"
, while you would use "(.*)"
or "/:fallback"
for path-to-regexp
.
Adding Parameters
When you use a custom matching algorithm like path-to-regexp
, you can extract values from the path. Let's say you have this route:
export const Component = () => <Route path="/news/:id" component={News} />;
You defined a parameter :id in your path. Now you can access it in your News
component:
export const News = (props: RouteComponentProps<{ id: string }>) => <div>News ID: {props.params.id}</div>;
Fresh Rendering
Let's say you have this route:
export const Component = () => <Route path="/news/:id" component={News} />;
Moving from /news/1
to /news/2
will only update the components properties. State will be preserved.
If you want to force the component to be created from scratch in this situation, you can do so by setting the property addKey
(boolean).
This will add the key
property to the component with a value of the current path.