Ошибка маршрутизации Typescript - этому вызову не соответствует ни одна перегрузка - PullRequest
Новая
       6

Ошибка маршрутизации Typescript - этому вызову не соответствует ни одна перегрузка

1 голос
/ 20 июня 2020

Я пытаюсь выполнить перенаправление на страницу регистрации при нажатии кнопки, однако я получаю сообщение «Нет перегрузки, соответствующей этой ошибке вызова». Я попытался найти ошибку в Google, но она кажется довольно широкой, и я новичок в Typescript, поэтому не знаю, как ее исправить.

Как мне исправить ошибку и как отображать форму регистрации при нажатии кнопки ? 

// Main.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, useRouteMatch, useParams } from 'react-router-dom';
import Button from '@material-ui/core/Button';
import Link from '@material-ui/core/Link';
import { SignUp } from "./SignUp";

function Main() {
    // some stuff above
    <Button component= { Link } to="/signup" variant="contained" color="primary">Sign up!</Button>
    // some stuff below
}

ReactDOM.render((
    <BrowserRouter>
        <Switch>
            <Route path="/">
                <Main />
            </Route>
            <Route path="/signup">
                <SignUp />
            </Route>
        </Switch>
    </BrowserRouter>),document.getElementById("main")
);

Это сообщение об ошибке, которое я получаю:

TS2769: Нет перегрузки, соответствующей этому вызову. Перегрузка 1 из 3, '(props: {href: string;} & {children ?: ReactNode; color ?: Color; disabled ?: boolean; disableElevation ?: boolean; disableFocusRipple ?: boolean; endIcon ?: ReactNode; fullWidth ?: boolean; href ?: string; size ?: "medium" | ... еще 1 ... | "small"; startIcon ?: ReactNode; option ?: "text" | ... еще 1 ... | "содержит ";} & {...;} & CommonProps <...> & Pick <...>): Element ', выдает следующую ошибку. Введите '{children: string; компонент: OverridableComponent>; нанизывать; тип: строка; fullWidth: true; вариант: "содержащиеся"; цвет: «основной»; className: строка; onClick: () => void; } 'не может быть назначен типу' IntrinsicAttributes & {href: string; } & {children ?: ReactNode; цвет ?: Цвет; отключен ?: логический; disableElevation ?: логический; disableFocusRipple ?: логический; ... еще 5 ...; вариант ?: "текст" | ... еще 1 ... | "содержится"; } & {...; } & CommonProps <...> & Выбрать <...> '. Свойство 'component' не существует для типа 'IntrinsicAttributes & {href: string; } & {children ?: ReactNode; цвет ?: Цвет; отключен ?: логический; disableElevation ?: логический; disableFocusRipple ?: логический; ... еще 5 ...; вариант ?: "текст" | ... еще 1 ... | "содержится"; } & {...; } & CommonProps <...> & Выбрать <...> '. Перегрузка 2 из 3, '(props: {component: OverridableComponent>;} & {children ?: ReactNode; color ?: Color; disabled ?: boolean; disableElevation ?: boolean; ... еще 6 ...; вариант ?: "text" | ... еще 1 ... | "contains";} & {...;} & CommonProps <...> & Pick <...>): Element ', выдает следующую ошибку. Тип «строка» не может быть присвоен типу «никогда». Перегрузка 3 из 3, '(props: DefaultComponentProps >>): Element' вызвала следующую ошибку. Введите '{children: string; компонент: OverridableComponent>; нанизывать; тип: "отправить"; fullWidth: true; вариант: "содержащиеся"; цвет: «основной»; className: строка; onClick: () => void; } 'не может быть назначен типу' IntrinsicAttributes & {children ?: ReactNode; цвет ?: Цвет; отключен ?: логический; disableElevation ?: логический; disableFocusRipple ?: логический; endIcon ?: ReactNode; ... еще 4 ...; вариант ?: "текст" | ... еще 1 ... | "содержится"; } & {...; } & CommonProps <...> & Выбрать <...> '. Свойство 'component' не существует для типа 'IntrinsicAttributes & {children ?: ReactNode; цвет ?: Цвет; отключен ?: логический; disableElevation ?: логический; disableFocusRipple ?: логический; endIcon ?: ReactNode; ... еще 4 ...; вариант ?: "текст" | ... еще 1 ... | "содержится"; } & {...; } & CommonProps <...> & Pick <...> '.

Ответы [ 2 ]

1 голос
/ 20 июня 2020

Это исключение material-ui, и это означает, что ваш компонент использует реквизиты, которых он не должен иметь.

Если вы сделаете это: 

import Button from '@material-ui/core/Button';
import Link from '@material-ui/core/Link';

<Button component={Link} to="/signup" variant="contained" color="primary">Sign up!</Button>

Вы скажете, что реагировать, что вы хотите отобразить кнопку как ссылку Material-Ui. Проблема в том, что у Material Ui Link https://material-ui.com/api/link/ отсутствует свойство «to». поэтому вы получите исключение.

Если вы используете React Router, измените свой код следующим образом: 

import { Link as RouterLink } from "react-router-dom";
import Button from "@material-ui/core/Button";

<Button component={RouterLink} to="/singup" variant="contained" color="primary">Sign up!</Button>

Если вы это сделаете, вы сообщите React, что хотите отобразить вашу кнопку как RouterLink от react-router-dom. Эта ссылка теперь имеет подпорку, к которой вы привыкли.

В качестве альтернативы вы можете использовать опору «href» из компонента Link Material-ui, но это испортит вашу маршрутизацию, поскольку это приведет к отображению обычный <a href=""></a> вместо React-Router <Link>.

0 голосов
/ 20 июня 2020

Можете ли вы изменить свою маршрутизацию и попробовать определить маршрут таким образом, надеюсь, это поможет 

<Route path="/signup" component={SignUp} />
...