Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-router-nomatch
Advanced tools
Readme
React Router interface that renders a component when no child route is matched.
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
).
$ npm install --save react-router-nomatch
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
.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 }>
...
path
(or from
) prop as non-matching;FAQs
React Router interface that renders a component when no child route is matched.
The npm package react-router-nomatch receives a total of 23 weekly downloads. As such, react-router-nomatch popularity was classified as not popular.
We found that react-router-nomatch demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.