Router를 사용하면서

라우터는 '/'를 포함해서 /detail로 path를 지정해서 넘기더라도 그전에 있던내용 까지 모두 포함해서 보여준다.

하지만 여기서 거치기 전의 path 부분에 exact 속성을 추가하면 /detail부분은 경로가 정확히 일치할때만 보여주게 된다.
.
라우터는 경로가 맞기만 하게되면 모두 보여주기 때문에 라우터를 따로 하나 생성하고 나서 '/:id' 이런식으로 아무 문자열을 인식하도록 적게 되면
문자열이 들어간 경로에는 다른 문자열이 들어간 경로에 path = '/:id' 의 내용이 모두 추가 되게 되버린다

Link,Route,Switch

위의 경우에서 Switch 컴포넌트를 사용해서 여러개가 맞아도 하나만 보여주도록 사용이 가능하다.
사용법은?? :

<div>
        <Route exact path="/">
            <Header />
            <MainLogo />
            <div className="container">
                <div className="row">
                    {
                        shoes.map((element,index)=>{
                            return <Card key={index} shoes={shoes[index]} index={index} />
                        })
                    }
                </div>
            </div>
        {/*  메인페이지에 해당하는 HTML 더 추가  */}
        </Route>
        <Route path="/detail">
            <Detail key={'Header'}/>
            {/*  상세페이지에 해당하는 HTML 더 추가  */}
        </Route>

        <Route path='/:id'>
            <div>
                아무거나 적었을때 이거 보여주셈
            </div>
            
        </Route>





        {/*<Product clothes={clothes} shoes={shoes} />*/}
    </div>
    

Switch는 일단은 진짜 스위치처럼 하나가 켜지면 하나가 꺼지듯이 생각하고,
여기서 예를들어 위의 코드를 컴포넌트로 감싸게 되면, path="/detail"과 /:id 가 매칭이 되지만, Switch 컴포넌트안에 있기때문에 둘중에 위에것만 택 1로 읽게 된다.