Preact router Property 'path' does not exist on type 'IntrinsicAttributes'

Question

I am currently going through a problem whilst making a website of mine with preact router. whenever I try to put something in the router it has an error of Property 'path' does not exist on type 'IntrinsicAttributes'. But it doesn't stop the site from running but whenever I change the url to '/shop' it doesn't show anything. shop function

import { Item } from '../../Types/types'
import './item.css'
import Navbar from '../Navbar'
export default function Items(items:Array<Item>) {
    return (
    <>
    <Navbar />
    <div className='container'>
    {
    items.map( item => { 
    return ( 
    <div className='item'>
        <div>
            <h3>
                {item.name}
            </h3>
        </div>      
        <div className='itemimage'>
            <img src={item.picture} alt={item.name} />
        </div>
        <div>
            <strong>{item.price}</strong>
        </div>
    </div>
    )})
    }
    </div>
    </>
    )
}

and my router function

import Router from 'preact-router'
import {App} from '../app'
import Items from './shop/items'
export const Route = () => {
    return (
    <Router>
    <App path='/' />
    <Items path='/shop' />  
    </Router>
    )
}

I tried following the tutorial on preact router. It did not work. I then tried to look up this problem there was nothing about this exact problem with preact-router.

Answer 1

I just encountered the same problem, and while rschristian's answer is good start, pointing to Route component, it's not entirely correct as the used form

<Route path="/" component="{<SomeComponent />} />

causes following error:

Type 'Element' is not assignable to type 'AnyComponent<{ path: string; component: Element; }> & (Element | undefined)'.

That's because Route expects AnyComponent which is either FunctionalComponent<Props> or ComponentConstructor<Props, any>.

So you want to use one of the following:

import { Route, Router } from 'preact-router'
import { App } from '../app'
import Items from './shop/items'

export const Routing = () => {
  return (
      <Router>
          {/* No props needed for App, so we can pass just the constructor. */}
          <Route path="/" component={App} />
          {/*
              If you need to pass props too, the Route will accept them.
              However it makes them all optional,
              so you'll get no type warning when you don't specify them all.
          */}
          <Route path="/shop" component={Items} items={...} />
      </Router>
  )
}

---

Alternatively, if you don't want to use Route, you can add path into component's props. Now you can do this manually:

interface ItemsProps {
    items: Item[]
    // Add the optional `path?` attribute to satisfy typescript.
    path?: string
}

or use RoutableProps:

import { RoutableProps } from "preact-router";

interface ItemsProps extends RoutableProps {
    items: Item[]
    // RoutableProps will add `path?` and `default?` attributes,
    // make sure you don't have conflict here, typescript won't tell you
    // and I'm not sure what the behavior would be.
}

function Items(props: ItemsProps) {
    // Implementation ...
}

Then you can skip the Route wrapper and use your component directly.

<Router>
    {/* No props needed for App, so wrapping in Route is still okay. */}
    <Route path="/" component={App} />
    {/* Since Items now supports `path` prop, typescript will be satisfied. */}
    <Items path="/shop" items={...} />
</Router>

I'm currently using this solution with preact-router version 4.1.2.