React[Router] - Redirect

01.Redirect

• Redirect는 react-router-dom에서 import해서 사용 합니다.
• Redirect 컴포넌트는 랜더링되면 to로 지정된 경로로 이동 합니다.

App.js

import { BrowserRouter, Route, Switch } from "react-router-dom"
import Home from "./pages/Home"
import Profile from "./pages/Profile"
import About from "./pages/About"
import NotFound from "./pages/NotFound"
import Links from "./components/Links"
import NavLinks from "./components/NavLinks"
import Login from "./pages/Login"
import { Redirect } from "react-router-dom"

const isLogin = true

function App() {
  return (
    <BrowserRouter>
      <Links />
      <NavLinks />
      <Switch>
        <Route
          path="/login"
          render={() => (isLogin ? <Redirect to="/" /> : <Login />)}
        />
        <Route path="/profile/:id" component={Profile} />
        <Route path="/profile" component={Profile} />
        <Route path="/about" component={About} />
        <Route path="/" exact component={Home} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  )
}

export default App

• Route컴포넌트에서는 component 속성 말고도 render 속성을 사용해서 페이지 이동할 수 있습니다.
• render 속성의 isLogin값이 true이면 /경로로 이동하고 false면 /login 경로로 이동 합니다.

실행결과
isLogin 값이 true 일 때

• http://localhost:3000/login => http://localhost:3000
  
• /(Home) 페이지로 이동 합니다.

isLogin 값이 false 일 때

• http://localhost:3000/login
  
• /login 페이지로 이동 합니다.