CODEWITHSUNDEEP
reactjstypescript
user42195
user42195

Reputation: 339

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

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

Error

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


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

export default App


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

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

Upvotes: 5

Views: 12354

Answers (2)

Majid M.
Majid M.

Reputation: 4954

It's because of you don't call {props.children} in the router.tsx. Change it to following 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, move 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.

Upvotes: 5

Paul Huynh
Paul Huynh

Reputation: 3140

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>
    </>
  )
}

Upvotes: 0

Related Questions