React블로그

리엑트 블로그 만들기 4 - Navbar 작성하기

리엑트 블로그 만들기 4 - Navbar 작성하기

import React from "react";
import { Link } from "react-router-dom";
import { Collapse, Container, Nav, Navbar, NavbarToggler } from "reactstrap";

const AppNavbar = () => {
  return (
    <div>
      <Navbar color="dark" dark expand="lg" className="sticky-top">
        <Container>
          <Link to="/" className="text-white text-decoration-none">
            Victor의 블로그
          </Link>
          <NavbarToggler />
          <Collapse isOpen={true} navbar>
            <Nav className="ml-auto d-flex justify-content-around" navbar>
              {true ? (
                <h1 className="text-white">authLink</h1>
              ) : (
                <h1 className="text-white">gestLink</h1>
              )}
            </Nav>
          </Collapse>
        </Container>
      </Navbar>
    </div>
  );
};

export default AppNavbar;
import React, { Fragment } from "react";
import Header from "../components/Header";
import Footer from "../components/Footer";
import AppNavbar from "../components/AppNavbar";

const MyRouter = () => (
  <Fragment>
    <AppNavbar />
    <Header>
      <h1>Hello Body</h1>
    </Header>
    <Footer></Footer>
  </Fragment>
);

export default MyRouter;
Share