[React.js] react-router-dom

npm i react-router-dom -s 패키지 설치

import { Route, Switch, BrowserRouter  } from "react-router-dom";
// pages import
import Home from './Comp/Home'
import About from './Comp/About'
import DashBoard from './Comp/DashBoard'
 
 
function App() {
  return (
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <Switch>          
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about" component={About} />
          <Route path="/dashboard" component={DashBoard} />
      </Switch>          
    </BrowserRouter>
  );
}
 
export default App;
 

최상단에 BrowserRouter로 감싸줘야 한다.

exact를 안넣어주면 '/', '/about'도 똑같이 Home 컴포넌트가 나올 것이다.

switch는 링크와 매칭되는 첫번째 라우트만 보여주고 나머지는 보여주지 않는다 따라서 exact 대신에 위와 같이 감싸주는 방식으로도 해결 가능하다 또한 path를 설정하지 않고 Route를 만들면 모든 url과 일치하지 않을 때 보여 줄 Not Found 페이지를 구현할 수 있다.

 

<호스팅시 404페이지가 뜨는 경우>

로컬에서는 localhost:3000/ 이지만
실제로 호스팅을 한다면 앞에 로컬호스트가 아닌 사이트 도메인이 붙을 것이다.
그랬을경우 route가 제대로 작동하지 않게 되는데(404가 뜰것이다) 그때 필요한게 basename으로 기본 도메인 부분을 붙여주는 것이다.

//깃허브 페이지를 이용할 때 index.js에서 BrowserRouter를 사용했는데 작동이 안되었고 app.js Component에서 BrowserRouter를 사용하니 정상 작동되었다. 이유는 나도 모르겠다.