React Router

nav의 각각의 link를 클릭할때 마다 , 해당페이지로 url을 이동시켜주는 기능이다. 

router을 왜 해야 하는 가?

 

• 특정 페이지에 대한 즐겨찾기 등록이 불가합니다. 컴포넌트가 전환되더라도 브라우저 주소창의 URL은 고정되어 있기 때문입니다.
• 뒤로 가기 버튼을 누르면 해당 앱내에서 이전 페이지로 이동하는 것이 아니라 그 전에 서핑하던 다른 웹사이트로 이동해버립니다.
• 새로 고침 버튼을 누르면 사용 중이던 컴포넌트가 아닌 무조건 최초에 렌더링되었던 Home 컴포넌트로 이동합니다.

 

1. install

npm i react-router-dom //을 termanal 에서 작동 해준다. 

package.json에서 'react-router-dom'이 다운되어진것을 확인할수 있다. 

 

2. import해주기 

import  {BrowserRouter, Routes, Route} from 'react-router-dom'

....

export default function HomePage(){
  return(
    <>  
        
        <BrowserRouter>  // 모든것을 BrowserRouter로 감싸 주어야 한다. 
             <nav>
               <Link to='/'>Home</Link> // Link를 사용하면 해당 페이지로 이동시 refresh가 되지 않음
               <a href='contact'>Contact</a>// a를 사용하면 해당 페이지로 이동시 refresh가 된다
               <Link to='about'>About</Link> //  to='about' 를 캐치 하고 > Route path='about 전달 
               
             </nav>
             <Routes>
                <Route path='/' element={<Start />} / >
                <Route path='about' element={<About />} / >  //Link에서 to 'about' 를 캐치할경우 <About>를 render
                <Route path='contact' element={<Contact />} / > // switch 를 대신한다. 
             </Routes>
        </BrowserRouter>
    </>
  )
}

3. navLink

 

import  {BrowserRouter, Routes, Route , NavLink} from 'react-router-dom'

....

export default function HomePage(){
  return(
    <>  
        
        <BrowserRouter> 
             <nav>
               <NavLink to='/'>Home</Link>  // class='active'가 자동으로 생김 이에 스타일을 함
                                            // 클릭했을때 해당 코드만 class='active'가 자동으로 생김
               <NavLink to='about'>About</Link>
               <NavLink to='contact'>Contact</Link> 
               
             </nav>
             <Routes>
                <Route path='/' element={<Start />} / >
                <Route path='about' element={<About />} / >  
                <Route path='contact' element={<Contact />} / >  
             </Routes>
        </BrowserRouter>
    </>
  )
}