React Vite - How do I link a different page in React?-CodePudding

I just started learning React but I can't for the life of me figure out how to link a new file to the App.jsx file. I've seen related questions but the setups are all quite different to mine. I used the default Vite template provided (for the most part). I've provided simple snippets of code below.

App.jsx code below:

import React from 'react'
import { useState } from 'react'
import './App.css'
import Pets from './components/Pets'

function App() {

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

export default App

The page I'd like to link:

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

The default main.jsx file which is part of the Vite template

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

CodePudding user response：

Change the default import's name to Animals

import React from 'react'
import { useState } from 'react'
import './App.css'
import Animals from './components/Pets'

function App() {

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

export default App

This should work in your case.

CodePudding user response：

Aren't you trying to import file Pets which has name Animals? If yes, simply rename the import Pets from './components/Pets' to import Animals from './components/Animals'