Preact路由器属性’path’在类型’IntrinsicAttributes’上不存在。

huangapple
go评论97阅读模式
英文:

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

问题

我在制作我的网站时遇到了一个问题，使用preact router。每当我尝试在路由器中放置某些内容时，会出现一个错误，错误消息是“属性'path'在类型'IntrinsicAttributes'上不存在”。但这并不会阻止网站运行，但每当我将URL更改为'/shop'时，它不会显示任何内容。
shop函数

  1. import { Item } from '../../Types/types'
  2. import './item.css'
  3. import Navbar from '../Navbar'
  5. export default function Items(items:Array<Item>) {
  6.   return (
  7.     <>
  8.       <Navbar />
  9.       <div className='container'>
  10.         {items.map(item => ( 
  11.           <div className='item'>
  12.             <div>
  13.               <h3>
  14.                 {item.name}
  15.               </h3>
  16.             </div>        
  17.             <div className='itemimage'>
  18.               <img src={item.picture} alt={item.name} />
  19.             </div>
  20.             <div>
  21.               <strong>{item.price}</strong>
  22.             </div>
  23.           </div>
  24.         ))}
  25.       </div>
  26.     </>
  27.   )
  28. }

我的路由器函数

  1. import Router from 'preact-router'
  2. import { App } from '../app'
  3. import Items from './shop/items'
  5. export const Route = () => {
  6.   return (
  7.     <Router>
  8.       <App path='/' />
  9.       <Items path='/shop' />
  10.     </Router>
  11.   )
  12. }

我尝试按照preact router的教程操作，但没有成功。然后我尝试查找这个问题，但没有找到与preact-router的这个确切问题相关的信息。

英文:

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

  1. import { Item } from &#39;../../Types/types&#39;
  2. import &#39;./item.css&#39;
  3. import Navbar from &#39;../Navbar&#39;
  4. export default function Items(items:Array&lt;Item&gt;) {
  5. 	return (
  6. 	&lt;&gt;
  7. 	&lt;Navbar /&gt;
  8. 	&lt;div className=&#39;container&#39;&gt;
  9. 	{
  10. 	items.map( item =&gt; { 
  11. 	return ( 
  12. 	&lt;div className=&#39;item&#39;&gt;
  13. 		&lt;div&gt;
  14. 			&lt;h3&gt;
  15. 				{item.name}
  16. 			&lt;/h3&gt;
  17. 		&lt;/div&gt;		
  18. 		&lt;div className=&#39;itemimage&#39;&gt;
  19. 			&lt;img src={item.picture} alt={item.name} /&gt;
  20. 		&lt;/div&gt;
  21. 		&lt;div&gt;
  22. 			&lt;strong&gt;{item.price}&lt;/strong&gt;
  23. 		&lt;/div&gt;
  24. 	&lt;/div&gt;
  25. 	)})
  26. 	}
  27. 	&lt;/div&gt;
  28. 	&lt;/&gt;
  29. 	)
  30. }

and my router function

  1. import Router from &#39;preact-router&#39;
  2. import {App} from &#39;../app&#39;
  3. import Items from &#39;./shop/items&#39;
  4. export const Route = () =&gt; {
  5. 	return (
  6. 	&lt;Router&gt;
  7. 	&lt;App path=&#39;/&#39; /&gt;
  8. 	&lt;Items path=&#39;/shop&#39; /&gt;	
  9. 	&lt;/Router&gt;
  10. 	)
  11. }

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.

答案1

得分: 2

这是TS的固有限制，不过有一个替代方案是从preact-router导出的<Route>组件：

  1. import { Route, Router } from 'preact-router'
  2. import { App } from '../app'
  3. import Items from './shop/items'
  5. export const RouteX = () => {
  6.     return (
  7.         <Router>
  8.             <Route path="/" component={<App />} />
  9.             <Route path="/shop" component={<Items />} />
  10.         </Router>
  11.     )
  12. }

基本上，TS的严格性意味着<Router>不能将其子组件额外定义为接受path属性。因此，您需要使用包装器来将路径应用于组件，而不是直接将路径应用于组件。

但它不会阻止网站运行，但无论何时更改url为'/shop'，都不会显示任何内容。

它不显示任何内容，因为您a)没有正确使用props，b)没有将items传递给<Items>。

  1. export default function Items({ items: Array<Item> }) {
  1. <Route path="/shop" component={<Items items={...} />} />

Props始终是一个对象，因此您需要解构或访问props对象上的.items。但是，由于您没有将items提供给<Items>，因此您的组件没有可用的数据来处理。

英文:

This is an inherent limitation of TS, though there is an alternative which is the &lt;Route&gt; component, exported from preact-router:

  1. import { Route, Router } from &#39;preact-router&#39;
  2. import { App } from &#39;../app&#39;
  3. import Items from &#39;./shop/items&#39;
  5. export const RouteX = () =&gt; {
  6.     return (
  7.         &lt;Router&gt;
  8.             &lt;Route path=&quot;/&quot; component={&lt;App /&gt;} /&gt;
  9.             &lt;Route path=&quot;/shop&quot; component={&lt;Items /&gt;} /&gt;
  10.         &lt;/Router&gt;
  11.     )
  12. }

Essentially, the strictness of TS means that &lt;Router&gt; can't define its children as additionally taking a path prop. So instead of applying your path to the component directly, you will need to use a wrapper to appease TS.

> But it doesn't stop the site from running but whenever I change the url to '/shop' it doesn't show anything

It doesn't show anything as you're a) not using props correctly and b) not passing items to &lt;Items&gt;.

  1. export default function Items({ items: Array&lt;Item&gt; }) {
  1. &lt;Route path=&quot;/shop&quot; component={&lt;Items items={...} /&gt;} /&gt;

Props are always an object, so you'll need to destructure or access .items on your props object. As you're not providing items to &lt;Items&gt; though, your component has no data to work with.

huangapple
  • 本文由 发表于 2023年1月9日 01:37:32
  • 转载请务必保留本文链接：https://go.coder-hub.com/75049983.html
  • preact
  • preact-router
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定