CODEWITHSUNDEEP
javascriptreactjsvite
neverlandcoder
neverlandcoder

Reputation: 45

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

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>
)

Upvotes: 1

Views: 3470

Answers (2)

OGreeni
OGreeni

Reputation: 786

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.

Upvotes: 1

Simon
Simon

Reputation: 63

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'

Upvotes: 0

Related Questions