TS2559: Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes'

user_16477447 0
Viewed 4194

I want to use react-router-dom by React with TypeScript. I have a typescript error in <Router> at Home.jsx.

Error

  • Home.tsx

    Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes'.TS2559(9)

  • 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'

const Home: React.FC = () => {
  return (
    <>
      <Router>
        <div>
          <div>Hii</div>
          <div>
            <Link to='/login'><Button color='green'>Login</Button></Link>
            <Link to='/register'><Button color='blue'>Register</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
typescript reactjs
2 Answers

It's because of you don't call {props.children} in the router.tsx. Change it to bellow code will remove the error:

const Router = : React.FunctionComponent (props) => {
  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>} />
        {props.children}
      </Switch>
    </BrowserRouter>
  )
}

But logically it doesn't need to do something as you did. Because your Router will handle the routes and you don't need to use it again in the Home. So instead of using Home in App, transform it to use Router in your App. Thus your code can change to this:

App.tsx

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

export default App

Home.tsx

const Home: React.FC = () => {
  return (
    <>
        <div>
          <div>Hii</div>
          <div>
            <Link to='/login'><Button color='green'>Login</Button></Link>
            <Link to='/register'><Button color='blue'>Register</Button></Link>
          </div>
        </div>
        <TitleDesc title='Hi' desc='Hi' />
    </>
  )
}

export default Home

Router.tsx

This component won't change.

user_149863720

I think Router only accepts a single child. You have two: div and TitleDesc. Wrap those in a <> and it should be fine:

const Home: React.FC = () => {
  return (
    <>
      <Router>
        <> {/* <-- new wrapper */ }
          <div>
            <div>Hii</div>
            <div>
              <Link to='/login'><Button color='green'>Login</Button></Link>
              <Link to='/register'><Button color='blue'>Register</Button></Link>
            </div>
          </div>
          <TitleDesc title='Hi' desc='Hi' />
        </> {/* <-- new wrapper */}
      </Router>
    </>
  )
}
user_26842890
Related