React-Router 2: Link, Rout, Switch 강의 중 Link to 가 안 되는 이유

[이혜연]

이슈사항

- 버튼을 클릭할 경우 주소창에 /detail 이라고 입력됩니다...

그런데 실제 이동은 하지 않고 그 주소창을 키보드로 입력하고 엔터를 누를 경우 디테일 페이지로 이동합니다.

즉,,, 버튼요소로 먹히지 않고 주소창에 직접 입력하고 엔터를 누를경우만 Route 기능이 작동되는데, 제가 놓친 부분이 있을까요?

 
<h5>import { Link, Route, Switch } from 'react-router-dom';
import Detail from './Detail.js';</h5>
<h5>function App() {
  let [shoes, setShoes] = useState(ProductData);  
  return (
    <div className="App">
      <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand href="#home">Shoe Shop</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
            <Nav.Link> <Link to="/">Home</Link> </Nav.Link>
            <Nav.Link> <Link to="/detail">Detail</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>
        </Container>
      </Navbar></h5>
<h5>      <Route exact path="/">
        <div className='background'>
          <h1>20% Season OFF</h1>
          <p>
            This site offer a biggest sale product in Korea.
            We hope you to enjoy here
          </p>
          <p>
            <Button variant="primary">Primary</Button>
          </p>
        </div>
        <div className='container'>
          <div className='row'>
            {
              shoes.map(function(shoe, i) {
                return <Card shoes={shoes[i]} i={i} key={i}></Card>
              })
            }
          </div>
        </div>
      </Route></h5>
<h5>      <Route path="/detail">
        <Detail></Detail>
      </Route>
    </div>
  );
}</h5>
 

 

 

[codingapple]

index.js를 라우터 첫 강의에 나와있는 것처럼 바꾸면 됩니다

[글쓴이]

글