React Router DOM

rehttps://reactrouter.com/web/guides/quick-start

React Router: Declarative Routing for React

React 화면 이동

react에서 화면 이동을 하려면 app.js(또는 다른 파일)에서 설정한 routing으로 화면 이동을 설정할 수 있다.
이때 사용하는 것이 'react-router-dom' 이다. npm을 이용하여 설치하자.

npm install react-router-dom --save

설치가 완료되면 위의 사이트에 Usage를 참고하여 다음과 같이 코드를 작성해보자.

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 />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

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

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

export default App;

 그리고 run 하면 다음과 같은 창을 볼 수 있다.

list안에 있는 링크들을 클릭하면 페이지가 이동한다.
이를 수정하자. list를 지우고 NavBar를 이용하여 화면 이동을 할 것이기 때문에 list를 지운다.

(화면을 이동하려면 url을 변경하면 된다.)

다음과 같은 기본 구조를 만들자.

import './App.css';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";
import LandingPage from './components/views/LandingPage/LandingPage'

function App() {
  return (
    <Router>
      <div>
        

        <hr />

        <Switch>
          <Route exact path="/">
            <LandingPage />
          </Route>
          <Route path="/about">
            {/* <About /> */}
          </Route>
          <Route path="/dashboard">
            {/* <Dashboard /> */}
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

LandingPage와 같이 다른 page들을 import하여 화면이 routing 되게 구현할 것이다.
우선적으로 LandingPage가 routing되는지 테스트해보자.

routing이 잘 되는 것을 확인할 수 있다. 이제 path를 변경하고 component를 import 하여 나머지를 구현해보자.

 

import './App.css';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";
import LandingPage from './components/views/LandingPage/LandingPage'
import LoginPage from './components/views/LoginPage/LoginPage'
import RegisterPage from './components/views/RegisterPage/RegisterPage'


function App() {
  return (
    <Router>
      <div>
        

        <hr />

        <Switch>
          <Route exact path="/">
            <LandingPage />
          </Route>
          <Route path="/login">
            <LoginPage />
          </Route>
          <Route path="/register">
            <RegisterPage />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

login 페이지가 routing이 잘되는지 테스트해보자.

코드를 더 깔끔하게 만들어보자.

import './App.css';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";
import LandingPage from './components/views/LandingPage/LandingPage'
import LoginPage from './components/views/LoginPage/LoginPage'
import RegisterPage from './components/views/RegisterPage/RegisterPage'


function App() {
  return (
    <Router>
      <div>
        <hr />
        <Switch>
          <Route exact path="/" component={LandingPage} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/register" component={RegisterPage} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

exact은 경로를 중복되지 않게 하는 것이고 component는 해당 라우터가 띄울 component를 의미한다.