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 (https://github.com/ReactTraining/react-router).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-router.
Additional Details
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), John Reilly (https://github.com/johnnyreilly), Karol Janyst (https://github.com/LKay), Dovydas Navickas (https://github.com/DovydasNavickas), Huy Nguyen (https://github.com/huy-nguyen), Jérémy Fauvel (https://github.com/grmiade), Daniel Roth (https://github.com/DaIgeb), Egor Shulga (https://github.com/egorshulga), Rahul Raina (https://github.com/rraina), Maksim Sharipov (https://github.com/pret-a-porter), Duong Tran (https://github.com/t49tran), Ben Smith (https://github.com/8enSmith), Wesley Tsai (https://github.com/wezleytsai), Sebastian Silbermann (https://github.com/eps1lon), and Nicholas Hehr (https://github.com/HipsterBrown).