[react 기록용, 쇼핑몰]2-6.route (Link, Route, Switch)

/*eslint-disable-next-line*/
import React, {useState} from 'react';
import { Button,Navbar,Nav,NavDropdown,Jumbotron,} from 'react-bootstrap';
import './App.css';
import Data from './data.js';
import Detail from './Detail.js';

import { Link, Route, Switch } from 'react-router-dom';

function App() {
  let [shoes, shoes변경] = useState(Data);

  return (
    <div className="App">
      <Navbar bg="light" expand="lg" className="navbar">
        <Navbar.Brand href="#home">모자팔이</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link><Link to="/">Home</Link></Nav.Link>
            <Nav.Link><Link to="/detail">Detail</Link></Nav.Link>
            <Nav.Link><Link to="/Hello">Hello</Link></Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

      <Switch>
        <Route exact path="/">
          <Jumbotron className="jumbotron">
              <h1>20% 시즌 오프</h1>
              <p>
                This is a simple hero unit, a simple jumbotron-style component for calling
                extra attention to featured content or information.
              </p>
              <p>
                <Button variant="primary">Learn more</Button>
              </p>
          </Jumbotron>
        <div className="container">
          <div className="row">
            {shoes.map(function(shoe,i){
              return(<DescGood shoe={shoe} i={i} key={i}/>)
            })}
          </div>
        </div>
        </Route>
        <Route path="/detail">
            <Detail/>
        </Route>
        <Route path="/hello">
          <div>sadfasdf</div>
        </Route>
        {/* <Route path="/어쩌구" component={Modal}></Route> */}
      </Switch>
      
    </div>
  );
}

function DescGood(props){
  return(
    <div className="col-md-4">
      <img src={'https://codingapple1.github.io/shop/shoes'+ (props.i+1) +'.jpg'}></img>
      <h4>{ props.shoe.title }</h4>
      <p>{ props.shoe.content } & { props.shoe.price }</p>
    </div>
  )
}

export default App;