带有 React 的打字稿，找不到导入

Question

我正在尝试使用模块导入，但我不知道我做错了什么，有人可以帮助我吗？

该应用程序在这里：

https://codesandbox.io/s/vigilant-sea-3q8v08

如果我尝试在 MainLayout 中输入，我可以使用 ctrl+leftclick 输入，但使用 npm start 时，此错误显示：

找不到依赖项：相对于“/src/App.tsx”的“布局”

这项工作：从“./components/layouts”导入{ MainLayout }；

但我想要：从“布局”导入 { MainLayout }；

我的应用

import React from "react";
import "./App.css";
import { Routes, Route, Link } from "react-router-dom";
import { MainLayout } from "layouts";

function App() {
  return (
    <Routes>
      <Route path="/" element={<MainLayout />}>
        <Route path="/" element={<h1>project with Api</h1>} />
        <Route path="about" element={<h1>test</h1>} />
      </Route>
    </Routes>
  );
}

export default App;

Answer 1

在 tsconfig 文件中添加 baseUrl 并删除“./src”。

.
.
    "baseUrl": ".",
    "paths": {
      "components": [
        "./components"
      ],
      "layouts": [
        "./components/layouts"
      ],
.
.

路径使用