如何正确使用 ReactJS 到达路由器与 TypeScript 和 ESLint？

Question

I'm trying to implement client-only routes using Reach Router in a project using TypeScript & ESLint. This is my initial implementation:

// src/pages/app/[...].tsx
import { Router, Redirect, useLocation } from '@reach/router';
import * as React from 'react';

import BrowseMain from '../../components/BrowseMain';
import Layout from '../../components/Layout';
import UploadMain from '../../components/UploadMain';
import * as styles from '../../styles/[...].module.scss';

const IndexPage = () => {
  const currLocation = useLocation();

  return (
    <Layout>
      <main className={styles.indexMain}>
        <Router basepath="/app">
          {['/', '/browse', '/browse/'].map((path) => <BrowseMain key={path} path={path} />)}
          {['/upload', '/upload/'].map((path) => <UploadMain key={path} path={path} />)}
          {/* Redirect 404 */}
          <Redirect noThrow default from={currLocation.pathname} to="/" />
        </Router>
      </main>
    </Layout>
  );
};

export default IndexPage;

// src/components/BrowseMain.tsx
import * as React from 'react';

import '../styles/BrowseMain.module.scss';
import Main from './Main';

const BrowseMain = () => <Main>Browse</Main>;

export default BrowseMain;

// UploadMain is similar to BrowseMain, so they are facing the same issue here.

// src/components/Main.tsx
import * as React from 'react';

import '../styles/Main.module.scss';

type MainProps = {
  children: string,
};

const Main = ({ children }: MainProps) => <>{children}</>;

export default Main;

At this point, TypeScript threw the following error on the BrowseMain and UploadMain routes in [...].tsx :

TS2322: Type '{ key: string; path: string; }' is not assignable to type 'IntrinsicAttributes'. Property 'path' does not exist on type 'IntrinsicAttributes'.

Following Reach Router's documentation for Usage with TypeScript , I made the following change:

import { RouteComponentProps } from '@reach/router';
import * as React from 'react';

import '../styles/BrowseMain.module.scss';
import Main from './Main';

const BrowseMain = (props: RouteComponentProps) => <Main>Browse</Main>;

export default BrowseMain;

This solves the previous linting error, however two new ones are raised:

TS6133: 'props' is declared but its value is never read.

ESLint: 'props' is defined but never used.(@typescript-eslint/no-unused-vars)

At this point, I'm stuck. I tried two different things, but they both raised linting errors:

// ESLint: Unexpected empty object pattern.(no-empty-pattern)
const BrowseMain = ({}: RouteComponentProps) => (

// ESLint: '_' is defined but never used.(@typescript-eslint/no-unused-vars)
const BrowseMain = (_: RouteComponentProps) => (

I feel like I'm in a damned if you do, damned if you don't situation right now. What's the correct way to declare an explicit type for props that will not be used?

Answer 1

You can specify the props using generics. In your case it will look like:

const BrowserMain: React.FC<RouteComponentProps> = () => <Main>Browse</Main

Using React.FC is however discouraged so you may also do it with a typescript call signature

type BrowserMainFC = {
  (props: RouteComponentProps): JSX.Element
}

const BrowseMain: BrowserMainFC = () => <div />

Check out this resource: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/