WEB 만들기 19 - React Router Dom

페이지를 이동 할때 React Router Dom 이란것을 사용합니다. 

이것이 무엇인지 알아보기 위해서 이 사이트를 참고하면 됩니다. 

reactrouter.com/web/example/basic

React Router: Declarative Routing for React

 

이런식으로 데모 페이지가 잘되어 있습니다. 

저기에 있는것을 토대로 페이지 전환하는것을 구현을 할것입니다. 

 

그전에 React Router Dom을 설치를 해야합니다. 

cd client 부분으로 와서 

npm install react-router-dom --save

이명령어로 설치를 해주시고

App.js 부분에 아까 사이트에 있는 코드를 복사해서 

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

 

이렇게 넣어주시고 

 <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>

 

이부분을 가져와서 

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

이렇게 app부분을 바꿔주고

 

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

이부분도 가져와서 이곳에

 

이곳아래에 넣어주고 서버를 켜봅시다. 

 

최종적으로 App.js는 

import './App.css';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";


function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;
function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

이렇게 되면 

 

이렇게 나오면 성공입니다. 

 

우리가 이제 원하는 방식으로 바꿔야합니다. 

 

나중에 nav바 부분에 넣을것이기 때문에 

 

파란색 블록은 지우고

 

아까 마지막에 넣었던 function을 지우고 나서

로그인 페이지랑 랜딩 페이지를 App.js 부분에 임폴트한다. 

 

import LandingPage from './components/views/LandingPage/LandingPage'

import LoginPage from './components/views/LoginPage/LoginPage';

import RegisterPage from './components/views/RegisterPage/RegisterPage';

 

이렇게 해서 넣어주고

 

각 페이지에 저렇게 이름이 써져있어야 서버를 켰을때 나옵니다. 

/register 하면 

3

 

 

이렇게 나오고 

이렇게 나오면 제대로 동작하는것 입니다. 

 

또 

          <Route exact path="/">
            <LandingPage />
           </Route>

이것 보다 깔끔하게 작성하는 법은

          <Route exact path="/" component={LandingPage}/>

 

이렇게 선언해도 가능합니다. 

  	  <Switch>
          <Route exact path="/" component={LandingPage}/>
          <Route exact path="/login" component={LoginPage}/>
          <Route exact path="/register" component={RegisterPage}/>
        </Switch>

이렇게 깔끔하게 작성이 가능합니다.