다른 페이지로 링크

# Header 페이지로 route 코드 옮겨와서 링크 걸었따.

routes 를 App.js 파일에 넣고 싶었으나... import를 두군데씩 해주야 하고... 않하고 공유하는 방법을 아직 몰라서....

일단 header 페이지에 옮겨서 처리해버림. 

 

# useNavigate를 추가하고 

 

import { Nav , Navbar , NavDropdown} from 'react-bootstrap';
import { Routes, Route, Link , useNavigate, Outlet} from 'react-router-dom'
import Main from '../pages/main.js';      
import Info from '../pages/info.js';
import Guide from '../pages/guide.js';
import Event from '../pages/event.js';


function Header(){
    let navigate = useNavigate();

    return(
    <>
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">  
          <Navbar.Brand onClick={()=>{ navigate('/') }}>React-Bootstrap</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link onClick={()=>{ navigate('/info') }}>Info</Nav.Link>
              <Nav.Link onClick={()=>{ navigate('/guide') }}>Guide</Nav.Link>
              <Nav.Link onClick={()=>{ navigate('/event') }}>Event</Nav.Link>
            </Nav>
            <Nav>
              <Nav.Link href="#deets">Sign In</Nav.Link>
              <Nav.Link eventKey={2} href="#memes">
                Sign Up
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
      </Navbar>

     {/* 페이지 분기 */}
      <Routes>
        <Route path="/" element={ <Main/> } />
        <Route path="/info" element={ <Info/> } />
        <Route path="/guide" element={ <Guide/> } />
        <Route path="/event" element={ <Event/> } />
      </Routes>
      
     </>
    )
  }
  
  export default Header;
  

 

 

 

# 라우팅 참고 사이트

 

https://www.daleseo.com/react-router-basic/

React Router로 라우팅 하기