型 '{ children: Element[]; }' には型 'IntrinsicAttributes' と共通のプロパティがありません。

Question

TypeScriptを用いたReactで、react-router-domを使いたいですがエラーが出ていて解決できません。

• App.tsx

import React from 'react'
import Home from './pages/Home'


function App() {
  return (
    <div>
      <Home />
    </div>
  )
}

export default App

• Home.tsx

import React from 'react'
import { Button, TitleDesc } from '../components/Index'
import { Link } from 'react-router-dom'
import Router from '../router'

type HomeProps = {
  children: Element[];
}

const Home: React.FC<HomeProps> = ({ children }) => {
  return (
    <>
      <Router>
        <div>
          <div>Hii</div>
          <div>
            <Link to='/login'><Button color='green'>ログイン</Button></Link>
            <Link to='/register'><Button color='blue'>登録</Button></Link>
          </div>
        </div>
        <TitleDesc title='Hiについて' desc='Hi' />
      </Router>
    </>
  )
}

export default Home

• router.tsx

import * as React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Login from './pages/Login'
import Register from './pages/Register'
import Home from './pages/Home'

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/Login' component={Login} />
        <Route exact path='/Register' component={Registerl} />
        <Route component={() => <h1>204 No Content</h1>} />
      </Switch>
    </BrowserRouter>
  )
}

export default Router

エラー内容

App.tsx

• プロパティ 'children' は型 '{}' にありませんが、型 'HomeProps' では必須です。
• 'children' はここで宣言されています。

Home.tsx

• 型 '{ children: Element[]; }' には型 'IntrinsicAttributes' と共通のプロパティがありません。
• 'children' is defined but never used.

Answer 1

プロパティ 'children' は型 '{}' にありませんが、型 'HomeProps' では必須です。

Home側でchildrenを必須と宣言してしまっているので、<Home />とchildrenなしの指定ではエラーとなります。

型 '{ children: Element[]; }' には型 'IntrinsicAttributes' と共通のプロパティがありません。
'children' is defined but never used.

関数コンポーネントで、（render propsで特殊な値を引数とする状況でなければ）childrenは自分で定義しなくてもReactの型定義が自動で入ります。

それと矛盾したchildrenの型を定義するのは、今回のようにエラーを生むだけです。

Comments

[607842]

ご回答頂き助かります！

import React from 'react'
import { Button, TitleDesc } from '../components/Index'
import { Link } from 'react-router-dom'
import Router from '../router'

const Home: React.FC = ( ) => {
return (
<>
<Router>
<div>
<div>Hii</div>
<div>
<Link to='/login'><Button color='green'>ログイン</Button></Link>
<Link to='/register'><Button color='blue'>登録</Button></Link>
</div>
</div>
<TitleDesc title='Hiについて' desc='Hi' />
</Router>
</>
)
}

export default Home

childrenの型定義を取り除きましたが、以下のエラーが残ったままになってしまっています。
型 '{ children: Element[]; }' には型 'IntrinsicAttributes' と共通のプロパティがありません。

[maisumakun]

どの行に対して当該のエラーが出ていますか？

[607842]

Home.tsx、８行目の<Router>です。

[maisumakun]

コードの意図がわかりません。

Routerは、childrenを取らないコンポーネントとして定義されているので、そこに子要素を渡しても無視されるだけです。