선생님 안녕하세요
리액트 강의 수강 후 포트폴리오를 만들고 있는데
라우터를 설치하고 LInk navigate 를 써서 페이지를 이동시키고 싶은데 페이지 이동이 안됩니다.
import './App.css';
import './styles/theme.css';
import { Routes, Route, useNavigate, Link} from 'react-router-dom';
function App() {
const navigate = useNavigate();
const menuItem = [
{ name: 'About', path: '/About'},
{ name: 'projects',path: '/projects'},
{ name: 'contact', path: '/contact'},
]
return (
<div className="App">
<header>
<div onClick={()=>{ navigate('/') }}>Portfolio</div>
<li style="list-style-type: none;">
{ menuItem.map(({name, path})=>{ return (
<li style="list-style-type: none;">
<Link onClick={() => {navigate(path)}} key={path}>{name}</Link>
) }) }
<div>github | blog</div> </header>
<Routes>
<Route path="/" element={<>메인페이지</>}/>
<Route path="/about" element={ <About /> } />
<Route path="/projects" element={ <>projects</> } />
<Route path="/contact" element={ <>contact</> } />
</Routes>
</div>
);
}
function About(){
return(
<div>
About
</div>
)
}
export default App;
코드는 이렇게 썼습니다.
아래의 경우 이동됨
<Link to ="/about">about</Link>
<div onClick={()=>{ navigate('/about') }}>About</div>
이동 안됨
<Link onClick={()=>{ navigate('/about') }}>About</Link>
혹시 어떤 게 문제인 걸까요?
