Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
react-router-dom
Advanced tools
The react-router-dom package is a popular library for handling routing in React web applications. It allows developers to implement dynamic routing in a web app, which is not possible with static routing. With react-router-dom, you can define routes, navigate between them, handle parameters and query strings, and manage the history stack, among other things.
Basic Routing
This code demonstrates how to set up basic routing in a React application using react-router-dom. It uses the BrowserRouter, Route, and Switch components to define routes for different components in the app.
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/contact' component={Contact} />
</Switch>
</Router>
);
}
Link Navigation
This code snippet shows how to use the Link component to create navigation links that allow users to click through different routes without causing a page reload.
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<Link to='/'>Home</Link>
<Link to='/about'>About</Link>
<Link to='/contact'>Contact</Link>
</nav>
);
}
Route Parameters
This example demonstrates how to handle dynamic routes using route parameters. The useParams hook is used to access the parameters of the current route.
import { Route, useParams } from 'react-router-dom';
function User() {
let { userId } = useParams();
return <h2>User ID: {userId}</h2>;
}
function Users() {
return (
<Route path='/users/:userId' component={User} />
);
}
Programmatic Navigation
This code shows how to navigate programmatically using the useHistory hook. It allows you to push a new entry onto the history stack, mimicking the behavior of a navigation action.
import { useHistory } from 'react-router-dom';
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push('/home');
}
return (
<button type='button' onClick={handleClick}>
Go home
</button>
);
}
Reach Router is another routing library for React with a more straightforward, accessible approach compared to react-router-dom. It automatically manages focus for accessibility, and routing is more component-based. However, as of my knowledge cutoff in 2023, Reach Router has been officially merged with React Router, and the team recommends using React Router for new projects.
Wouter is a minimalist routing library for React and Preact that does not rely on the context API. It offers a simpler API and smaller bundle size compared to react-router-dom, making it a good choice for smaller projects or when you want to keep your project lightweight.
Navi is a JavaScript library for declaratively mapping URLs to asynchronous content. It's designed to work with React and allows for lazy-loading routes, which can help improve performance in large applications. Navi provides a different approach to routing by focusing on content-first routing, which can be beneficial for certain types of applications.
The react-router-dom
package contains bindings for using React
Router in web applications.
Please see the Getting Started guide for more information on how to get started with React Router.
v6.23.0
Date: 2024-04-23
The new unstable_dataStrategy
API is a low-level API designed for advanced use-cases where you need to take control over the data strategy for your loader
/action
functions. The default implementation is today's behavior, to fetch all loaders in parallel, but this option allows users to implement more advanced data flows including Remix "Single Fetch", user-land middleware/context APIs, automatic loader caching, and more. Please see the docs for more information.
Note: This is a low-level API intended for advanced use-cases. This overrides React Router's internal handling of loader
/action
execution, and if done incorrectly will break your app code. Please use with caution and perform the appropriate testing.
Currently, all active loader
's revalidate after any action
submission, regardless of the action
result. However, in the majority of cases a 4xx
/5xx
response from an action
means that no data was actually changed and the revalidation is unnecessary. We've introduced a new future.unstable_skipActionErrorRevalidation
flag that changes the behavior here, and we plan to make this the default in future version of React Router.
With this flag enabled, action
's that return/throw a 4xx
/5xx
response status will no longer automatically revalidate. If you need to revalidate after a 4xx
/5xx
result with this flag enabled, you can still do that via returning true
from shouldRevalidate
- which now also receives a new unstable_actionStatus
argument alongside actionResult
so you can make decision based on the status of the action
response without having to encode it into the action data.
unstable_dataStrategy
configuration option (#11098, #11377)@remix-run/router
- Add a new future.unstable_skipActionRevalidation
future flag (#11098)@remix-run/router
- SSR: Added a new skipLoaderErrorBubbling
options to the staticHandler.query
method to disable error bubbling by the static handler for use in Remix's Single Fetch implementation (#11098, (#11377))Full Changelog: v6.22.3...v6.23.0
FAQs
Declarative routing for React web applications
The npm package react-router-dom receives a total of 8,339,759 weekly downloads. As such, react-router-dom popularity was classified as popular.
We found that react-router-dom demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers 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
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.