[react 기록용, 쇼핑몰]2-5. router1

1. 설치

yarn add react-router-dom

npm install react-router-dom

 

2. index.js에 아래 추가

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>
  document.getElementById('root')
);

3. app.js에 라우팅하는 방법

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

function App(){
  return (
    <div>
    
      <Route exact path="/"> 
        HTML 소스
      </Route>
      
      <Route path="/detail">
        HTML 소스
      </Route>
      <Route path="/어쩌구"> <Card/> </Route> //컴퍼넌트(<Card />)로 작성도 가능
      
    </div>
  )
}