I wanna connect arrow up and down to change sections, and with it change url with useHistory but i get this error "Pages.jsx:15 Uncaught TypeError: Cannot read properties of undefined (reading 'push')" P.s. now i just wanna check if this will log and change URL
Code below
import {Route, Router, useHistory} from 'react-router-dom'
import Section1 from "./Pages/Section1";
import Section2 from "./Pages/Section2";
import '../css/Pages.css'
const Pages = () =>{
const [count, setCount] = useState(0)
const urls = ['/home', '/about', '/story']
const history = useHistory()
useEffect(() => {
const keyCheck = (event) => {
if(event.keyCode === 40){
console.log('arrow down');
setCount(count-1)
history.push(urls[count])
} else if (event.keyCode === 38){
console.log('arrow up');
setCount(count+1)
history.push(urls[count])
}
}
window.addEventListener('keydown', keyCheck);
return () => {
window.removeEventListener('keydown', keyCheck);
};
}, [count])
return(
<div id="fullPage">
{/*<Router>
<Route path='/report' component={Section2}/>
</Router> */}
</div>
)
}
export default Pages
You need to wrap the parent component in the Router. Or move the useHistory logic to a child component and place the child component inside the Router fragment.
Router provides the context for useHistory!
const Pages = () =>{
return(
<div id="fullPage">
<Router>
<RouterWithKeyNavigation />
</Router>
</div>
)
}
Then this file will be wrapped by the router component from react-router-dom
const RouterWithKeyNavigation = () => {
const [count, setCount] = useState(0)
const urls = ['/home', '/about', '/story']
const history = useHistory()
useEffect(() => {
const keyCheck = (event) => {
if(event.keyCode === 40){
console.log('arrow down');
setCount(count-1)
history.push(urls[count])
} else if (event.keyCode === 38){
console.log('arrow up');
setCount(count+1)
history.push(urls[count])
}
}
window.addEventListener('keydown', keyCheck);
return () => {
window.removeEventListener('keydown', keyCheck);
};
}, [count])
return (<Route path='/report' component={Section2}/>)
}