Я пытаюсь реализовать клиентские маршруты с помощью Reach Router в проекте с использованием TypeScript и ESLint. Это моя первоначальная реализация:
// 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;
В этот момент TypeScript выдал следующую ошибку на маршрутах BrowseMain
и UploadMain
в [...].tsx
:
TS2322: введите '{ ключ: строка; путь: строка; }» нельзя присвоить типу «IntrinsicAttributes». Свойство «путь» не существует для типа «IntrinsicAttributes».
Следуя документации Reach Router по Использованию TypeScript, я внес следующее изменение:
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;
Это решает предыдущую ошибку линтинга, однако возникают две новые:
TS6133: реквизит объявлен, но его значение никогда не считывается.
ESLint: реквизит определен, но никогда не используется.(@typescript-eslint/no-unused-vars)
На данный момент я застрял. Я пробовал две разные вещи, но они обе вызывали ошибки линтинга:
// 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) => (
Я чувствую, что я в проклятом положении, если ты это сделаешь, черт возьми, если ты не сделаешь это прямо сейчас. Как правильно объявить явный тип реквизита, который не будет использоваться?