刚开始将 TypeScript 与 React 结合使用。当我导入来自 .tsx 文件的组件时,默认情况下它假定它是 .js 文件。该错误表明该目录中没有 About.js 文件或 Contact.js 文件。此外,TS linter 不允许我将 .tsx 添加到文件路径的末尾。如何解决这个问题?我使用了“npx create-react-app project_name --typescript”。这是我的代码
import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './views/Home'
import About from './views/About'
import Contact from './views/Contact'
import Navbar from './components/Navbar'
import Footer from './components/Footer'
const App: React.FC<{}> = () => {
return (
<BrowserRouter>
<Navbar title="Website" links={['About', 'Contact']} color="blue"/>
<Route exact path="/" component={Home}/>
<Route path="/home" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
<Footer/>
</BrowserRouter>
)
}
export default App
你用过创建反应应用程序吗?如果您没有使用或使用并弹出它,您应该将此配置添加到您的 webpack 配置文件中:
{
resolve: {
extensions: [".js", ".json", ".ts", ".tsx"],
},
}
如果您使用创建反应应用程序并且没有弹出它,您可以将这些规则添加到您的typescript-eslint
module.exports = {
settings: {
'import/resolver': {
'node': {
'extensions': ['.js','.jsx','.ts','.tsx']
}
}
}
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)