react-router-nomatch
v2.0.6
Published
React Router interface that renders a component when no child route is matched.
Downloads
70
Maintainers
Readme
React Router NoMatch
React Router interface that renders a component when no child route is matched.
Why not use Switch?
Switch
renders the first child Route
that matches and nothing else. This is fine if your app is built as a set of monolithic pages.
NoMatch
allows multiple child Routes
to be rendered, and lets you specify a fallback component if none of them match. This is more suited to dynamic routing where multiple Routes
match the same location (for instance in a responsive master-detail layout where both the master and detail views have their own Routes
).
Install
$ npm install --save react-router-nomatch
Props
component
: The fallback component class. Renders with amatch
prop that istrue
if one of the childRoutes
matched.render
: Same ascomponent
but for inline rendering. Renders with amatch
prop that is true if one of the child Routes matched.component
takes precedence overrender
if both are defined.alwaysRender
: Whether to always render the fallback component or only when none of theRoutes
match. Defaults tofalse
.
Example
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Redirect } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import NoMatch from 'react-router-nomatch';
const Navbar = () => <div>Navbar</div>;
const SignIn = () => <div>SignIn</div>;
const Newsfeed = () => <div>Newsfeed</div>;
const MessagesMaster = () => <div>MessagesMaster</div>;
const MessagesDetail = () => <div>MessagesDetail</div>;
const NotFound = () => <div>NotFound</div>;
const App = () => {
return (
<Router history={createBrowserHistory()}>
<NoMatch component={NotFound}>
<Navbar />
<Route path="/signin" exact component={SignIn} />
<Route path="/" exact render={props => <Redirect to="/signin" />} />
<Route path="/newsfeed" exact component={Newsfeed} />
<Route path="/messages" component={MessagesMaster} />
<Route path="/messages/:index?" exact component={MessagesDetail} />
</NoMatch>
</Router>
);
}
const rootElement = document.createElement("DIV");
document.body.appendChild(rootElement);
ReactDOM.render(<App />, rootElement);
Same result using the render
and alwaysRender
props:
...
<NoMatch render={ match => (match ? null : <NotFound />) } alwaysRender={ true }>
...
Notes
- NoMatch considers child components without a
path
(orfrom
) prop as non-matching; - The fallback component is always rendered before children.