React Vite项目中如何在App.jsx中关联新页面组件？

你当前的核心问题是：在App.jsx里使用了<Animals/>组件，但未正确导入它，同时还导入了未使用的Pets组件。按以下步骤修改即可：

1. 确认组件文件位置 #

假设你的Animals.jsx放在src/components/目录下（如果文件位置不同，对应调整后续的导入路径）。

2. 修正App.jsx代码 #

调整导入语句和组件使用部分，删除无用的Pets导入，添加Animals的正确导入：

import React from 'react'
import { useState } from 'react'
import './App.css'
// 替换无用的Pets导入，改为导入Animals组件
import Animals from './components/Animals'

function App() {
  return (
    <div className="App">
      <Animals/>
    </div>
  )
}

export default App

3. 确认Animals组件的导出 #

你的Animals.jsx已经通过export default Animals完成了组件导出，这部分没问题，保持原样即可：

import React from 'react'

function Animals() {
    return(
      <div>
        <h3>Pets for Africa</h3>
        <ul>
          <li>dogs</li>
          <li>cats</li>
        </ul>
      </div>
    )
}

export default Animals

原理说明 #

Vite的React默认模板已经配置好ES模块导入规则，只要你按相对路径正确导入组件文件，就能在App组件中使用该子组件。而main.jsx已经负责将App组件渲染到页面的root节点中，所以只要App与Animals组件的关联正确，页面就能显示Animals的内容。

内容的提问来源于stack exchange，提问作者neverlandcoder