리액트 부트스트랩 nav에 route적용하기

이번에는 부트스트랩 nav를 만들고 react-route를 적용해본다. 먼저 react-route-dom을 설치한다. 

참조: reactrouter.com/web/guides/quick-start

React Router: Declarative Routing for React

npm install react-router-dom

 

react-bootstrap로 navbar를 만든다.

import './assets/css/App.css';
import {Button, Form, FormControl, Nav, Navbar, NavDropdown} from "react-bootstrap";

function App() {
  return (
      <header>
          <Navbar bg="light" expand="lg">
              <Navbar.Brand href="#home">Home</Navbar.Brand>
              <Navbar.Toggle aria-controls="basic-navbar-nav" />
              <Navbar.Collapse id="basic-navbar-nav">
                  <Nav className="mr-auto">
                      <Nav.Link href="#home">Sign In</Nav.Link>
                      <NavDropdown title="Example" id="basic-nav-dropdown">
                          <NavDropdown.Item href="#action/3.1">Ablum</NavDropdown.Item>
                          <NavDropdown.Item href="#action/3.2">Pricing</NavDropdown.Item>
                      </NavDropdown>
                  </Nav>
                  <Form inline>
                      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                      <Button variant="outline-success">Search</Button>
                  </Form>
              </Navbar.Collapse>
          </Navbar>
      </header>
  );
}

export default App;

다음과 같이 route를 적용한다.

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import './assets/css/App.css';
import {Button, Form, FormControl, Nav, Navbar, NavDropdown} from "react-bootstrap";

function App() {
  return (
      <header>
          <Router>
              <Navbar bg="light" expand="lg">
                  <Navbar.Brand href="/home">Home</Navbar.Brand>
                  <Navbar.Toggle aria-controls="basic-navbar-nav" />
                  <Navbar.Collapse id="basic-navbar-nav">
                      <Nav className="mr-auto">
                          <Nav.Link href="/signin">Sign In</Nav.Link>
                          <NavDropdown title="Example" id="basic-nav-dropdown">
                              <NavDropdown.Item href="/album">Ablum</NavDropdown.Item>
                              <NavDropdown.Item href="/pricing">Pricing</NavDropdown.Item>
                          </NavDropdown>
                      </Nav>
                      <Form inline>
                          <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                          <Button variant="outline-success">Search</Button>
                      </Form>
                  </Navbar.Collapse>
              </Navbar>
              <Switch>
                  <Route path={"/signin"}>
                      <SignIn />
                  </Route>
                  <Route path={"/album"}>
                      <Album />
                  </Route>
                  <Route path={"/pricing"}>
                      <Pricing />
                  </Route>
                  <Route path={"/"}>
                      <Home />
                  </Route>
              </Switch>
          </Router>

      </header>
  );
}

function Home(){
    return(
        <h1>Home</h1>
    )
}

function SignIn(){
    return(
        <h1>Sign In</h1>
    )
}

function Album(){
    return(
        <h1>Album</h1>
    )
}

function Pricing(){
    return(
        <h1>Pricing</h1>
    )
}
export default App;

 

 

다음과 같은 화면에서 링크를 클릭하고 페이지가 변경이 되는지 확인한다.