What is @types/react-router?
@types/react-router provides TypeScript type definitions for the react-router library, which is used for routing in React applications. These type definitions help developers use react-router with TypeScript, ensuring type safety and better developer experience.
What are @types/react-router's main functionalities?
Route Definitions
Defines a route in a React application, specifying the path and the component to render.
import { Route } from 'react-router-dom';
const App = () => (
<Route path="/home" component={HomeComponent} />
);
Link Component
Creates navigational links in a React application, allowing users to navigate between different routes.
import { Link } from 'react-router-dom';
const Navigation = () => (
<nav>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
</nav>
);
useHistory Hook
Provides access to the history instance, allowing programmatic navigation within a React component.
import { useHistory } from 'react-router-dom';
const NavigateButton = () => {
const history = useHistory();
const handleClick = () => {
history.push('/home');
};
return <button onClick={handleClick}>Go Home</button>;
};
useParams Hook
Extracts route parameters from the URL, making them available within a React component.
import { useParams } from 'react-router-dom';
const UserProfile = () => {
const { userId } = useParams<{ userId: string }>();
return <div>User ID: {userId}</div>;
};
Other packages similar to @types/react-router
@types/react-router-dom
Provides TypeScript type definitions for the react-router-dom library, which is a specific implementation of react-router for web applications. It includes additional components like BrowserRouter and HashRouter.
@types/react-router-redux
Provides TypeScript type definitions for the react-router-redux library, which integrates react-router with Redux for state management. It allows for synchronized routing and state management.
@types/reach__router
Provides TypeScript type definitions for the @reach/router library, which is an alternative to react-router with a focus on accessibility and simplicity. It offers a similar API but with some differences in implementation and features.
Installation
npm install --save @types/react-router
Summary
This package contains type definitions for react-router v2.0.0 (https://github.com/rackt/react-router).
Details
Files were exported from https://www.github.com/DefinitelyTyped/DefinitelyTyped/tree/types-2.0/react-router
Additional Details
- Last updated: Mon, 14 Nov 2016 19:35:01 GMT
- File structure: UMD
- Library Dependencies: history
- Module Dependencies: history, react
- Global values: IndexLink, Lifecycle, Link, ReactRouter, RouteContext, Router, browserHistory, hashHistory, self, useRoutes, withRouter
Credits
These definitions were written by Sergey Buturlakin https://github.com/sergey-buturlakin, Yuichi Murata https://github.com/mrk21, Václav Ostrožlík https://github.com/vasek17, Nathan Brown https://github.com/ngbrown, Alex Wendland https://github.com/awendland, Kostya Esmukov https://github.com/KostyaEsmukov.