1

这是名为Approutes.tsx的路由页面

import { BrowserRouter as Router,Route, Switch } from "react-router-dom";
import  Test1 from "../../components/Test/Test1";
import About from "../../components/About/About";


export const Routes: React.FC = () => (
<Router>
  <Switch>
  <Route exact path='/test' component={Test}/>
  <Route exact path='/aboutus' component={About}/>
  </Switch>
</Router>
)

About.tsx文件_

import * as React from 'react'


const About: React.FC=()=>{
    return(
        <div><h2>About US PAGE</h2></div>
    )
}
export default About;

Test.tsx文件

const Test: React.FC=()=>{
    return(
        <div><h2>Test PAGE</h2></div>
    )
}
export default Test;

没有错误，但组件仍然没有呈现，我正在使用 ts 在 saleor-storefront 框架上进行编辑

我认为组件在 src/components/Test/Test1 src/components/About/About中的路径的 tsconfig.json 存在一些问题

{
  "compilerOptions": {
    "baseUrl": ".",
    "esModuleInterop": true,
    "module": "commonjs",
    "jsx": "react",
    "lib": ["es2017", "dom", "esnext"],
    "sourceMap": true,
    "target": "es6",
    "noUnusedLocals": true,
    "paths": {
      "@components/*": ["./src/@next/components/*"],
      "@components/atoms": ["./src/@next/components/atoms/index.ts"],
      "@components/molecules": ["./src/@next/components/molecules/index.ts"],
      "@components/organisms": ["./src/@next/components/organisms/index.ts"],
      "@components/templates": ["./src/@next/components/templates/index.ts"],
      "@components/containers": ["./src/@next/components/containers/index.ts"],
      "@pages": ["./src/@next/pages/index.ts"],
      "@styles": ["./src/@next/globalStyles/index.ts"],
      "@styles/*": ["./src/@next/globalStyles/*"],
      "images/*": ["./src/images/*"],
      "@utils/*": ["./src/@next/utils/*"],
      "@hooks": ["./src/@next/hooks/index.ts"],
      "@hooks/*": ["./src/@next/hooks/*"],
      "@types": ["./src/@next/types/index.ts"],
      "@types/*": ["./src/@next/types/*"],
      "@app/*": ["./src/@next/*"],
      "@locale/*": ["./locale/*"],
      "@temp/*": ["./src/*"]
    },
    "resolveJsonModule": true,
    "skipLibCheck": true
  },
  "exclude": ["node_modules"]
}
4

1 回答 1

0

从“../../components/Test/Test1”导入测试；

组件名称将为 Test1.tsx

于 2021-07-03T16:33:23.673 回答