How do I use React Router with TypeScript?

How do I use React Router with TypeScript?

To use React Router with TypeScript, first install the necessary packages: react-router-dom and @types/react-router-dom. Then, you can define your routes using the BrowserRouter, Route, and Switch components.

Can you show me a basic example?

Sure! Here's a simple example:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home: React.FC = () => <h2>Home</h2>;
const About: React.FC = () => <h2>About</h2>;

const App: React.FC = () => (
  <Router>
    <Switch>
      <Route path='/' exact component={Home} />
      <Route path='/about' component={About} />
    </Switch>
  </Router>
);

export default App;

How do I type the route props?

You can type the route props by using the RouteComponentProps interface from react-router-dom. For example:

import { RouteComponentProps } from 'react-router-dom';

interface Props extends RouteComponentProps<{ id: string }> {}

const User: React.FC<Props> = ({ match }) => {
  return <h2>User ID: {match.params.id}</h2>;
};