машинописный текст не отображает динамический c URL-адрес на rea c -router-dom - PullRequest
Новая
       76

машинописный текст не отображает динамический c URL-адрес на rea c -router-dom

0 голосов
/ 12 июля 2020

У меня есть компонент YachtDetails: 

import React from "react";
import {RouteComponentProps} from "react-router-dom";

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

const YachtDetails:React.FC<Props> = ({match}) => {
    return ()

, и я получаю сообщение об ошибке на моем App.tsx в YachtingDetails: 

function App() {
    const [show, toggle] = useToggler();


    return (

        <div style={{height: '100%', backgroundColor:'#fff5f5'}}>
            <Toolbar toggle={toggle}/>
            <Drawer show={show} toggle={toggle}/>
            <Backdrop/>
            <main style={{marginTop: '56px'}}>
                <Switch>
                    <Route exact path="/yachts-for-rent/:id">
                        <YachtDetails/> *iget error Type '{}' is missing the following properties from type 'Props': history, location, match
                    </Route>
                </Switch>
            </main>
            <Footer/>
        </div>

    );
}

export default App;

Я новичок и пытаюсь создать динамик c URL и получить информацию из json файла.

1 Ответ

0 голосов
/ 12 июля 2020

Поскольку вы используете машинописный текст, вы сообщаете программе, что компонент YachtDetails должен иметь некоторые свойства, иначе будет выдана ошибка.

Эти свойства следующие 

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

поэтому для того, чтобы ваш код компилировался, он должен быть: 

  const history = useHistory();
  const location = useLocation();
  const match = useRouteMatch();

<YachtDetails history={history} location={location} match={match}/>

, если вам нужно только свойство match, тогда вам не обязательно расширять RouteComponentProps, вы можете сделать что-то вроде этого: 

interface Props {
  match: any
}
...