While trying to put the component below into a router I get the following error:
WARNING in src\App.js Line 3:8: 'errorScreen' is defined but never used no-unused-vars
const errorScreen = () => {
const homeRedirect = () => {
window.location.assign('/')
}
return (
<div className='successMessage'>
<h2> Error! </h2>
<h3>
Please try again on a computer or laptop.{' '}
<a href='/' onClick={homeRedirect}>
Back to Portfolio
</a>
</h3>
</div>
)
}
export default errorScreen
My code in App.js
import HomeScreen from './screens/HomeScreen'
import FormScreen from './screens/FormScreen'
import errorScreen from './screens/errorScreen'
import { Route } from 'react-router'
import { BrowserRouter as Router, Routes } from 'react-router-dom'
function App() {
return (
<Router>
<Routes>
<Route path='/' element={<HomeScreen />} />
<Route path='/error' element={<errorScreen />} />
<Route path='/form' element={<FormScreen />} />
</Routes>
</Router>
)
}
export default App
The other components work just fine
Problem is with your naming of component, component name must start with capital letter. All React component names must start with a capital letter. If you start a component name with a lowercase letter, it will be treated like a built-in element like a <div> or a <span>, meaning in your case <errorScreen /> is not referencing errorScreen from import, as you were thinking, but rather treating it as some buil-in element tag. Just rename component name from errorScreen to ErrorScreen and update route with new name.