@types/react-router

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.

README

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

• Last updated: Thu, 07 Mar 2019 23:04:22 GMT
• Dependencies: @types/react, @types/history
• Global values: none

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, Tanguy Krotoff https://github.com/tkrotoff, 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, Youen Toupin https://github.com/neuoy, 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.