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 a match
prop that is true
if one of the child Routes
matched.render
: Same as component
but for inline rendering. Renders with a match
prop that is true if one of the child Routes matched. component
takes precedence over render
if both are defined.alwaysRender
: Whether to always render the fallback component or only when none of the Routes
match. Defaults to false
.
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
(or from
) prop as non-matching; - The fallback component is always rendered before children.