React : Router (BrowserRouter , Routes , Route) & Url 파라미터 다루기

by Posted on

ㆍReact 라우터

> React 라우터 설치
c:\project> npm i react-router-dom

react-router-dom 모듈을 설치하면 아래와 같은 기능을 이용 할 수 있다.
ㆍ라우터 관련 컴포넌트  <BrowserRouter/> , <Routes/> , <Route/>
ㆍ페이지 이동 관련 컴포넌트  <Link/> , <Navigate/> 
ㆍUrl관련 및  파라미터를 정보다루기 위한 Hook  {useParam} , {useLocation} , {useSearchParams}  
ㆍ페이지 이동 관련 Hook {useNavigate} , {NavLink}

ㆍ경로를 라우팅하기위한 3가지 컴포넌트 <BrowserRouter/> , <Routes/> , <Route>

반드시 <BrowserRouter> 안에, <Routes> 를 작성하고 <Routes> 안에, <Route> 를 항목 하나씩 작성하며,
<Link to=”/Home”>홈</Link> 태그 컴포넌트 또한 <BrowserRouter> 안에 작성하여야 한다

<BrowserRouter>
     <Routes>
           <Route  path=”/Home” element={<Component></Component>} /> 
           <Route  path=”/Board” element={<Component></Component>} /> 
           <Route  path=”/MyPage” element={<Component></Component>} /> 
    </Routes>
</BrowserRouter>

, 자식 컴포넌트로 작성해도 무방하며, 순서상  <BrowserRouter>  >  <Routes>  > <Route> 순서만 유지하면 된다.

ㆍ <Routes> and <Route> 컴포넌트는 화면에 출력되지 않으며, 라우팅 역할을 할 수 있게 적당한 태그위치에
     path 와 element 로 설정해 놓으면 된다.



App.js

import {Link} from ‘react-router-dom’
import { Routes , Route } from ‘react-router-dom’
 
import Home from ‘./pages/Home’
import Board from ‘./pages/Board’
import Intro from ‘./pages/Intro’


function App(){
  return(

      <div>
           <Link to=”/Home”>홈</Link>   (Link 태그는  A 태그로 변화되며 ,반드시 <BrowserRouter/> 안에 작성해야함)
           <Link to=”/Board”>보드</Link>
           <Link to=”/Intro”>인트로</Link>
           <Routes>
                 <Route path=”/Home” element={<Home></Home>}></Route>
                 <Route path=”Board” element={<Board></Board>}></Route>
                 <Route path=”Intro” element={<Intro></Intro>}></Route>
           </Routes>
      </div>
  )
}

index.js

 
import App from ‘./App’;
import {BrowserRouter} from ‘react-router-dom’


root.render(  

  <div>
  <BrowserRouter>
         <App />   (App 컴포넌트안에 , <Routes/> <Route/> 컴포넌트가순서있게 유지되고있음)
  </BrowserRouter>
  </div>
)


ㆍ경로이동 Navigation 관련 컴포넌트와 Hook 다루기

<Link to=””></Link>
   import { Link } from ‘react-router-dom’  
 <BrowserRouter/> 컴포넌트 내부에 작성해야하며, <Link to=”path”> 의 path 는 라우팅 경로를 작성한다.
   예를들어 <Link to=”Home”>홈</Link> 은 http://localhost/Home 을 가리키며,
   <Link to=”http://www.naver.com”>네이버</Link>는 http://localhost/http://www.naver.com 로 라우팅한다.
   그냥 단순 링크가 아님을명심 하자. Link 는 라우팅을 위한 Link 이다.

   * <Link> 의 to  속성과 Route 의 path 속성을 매핑시킨다.
     <Link to=”Home“>링크</Link> 는 <Route path=”Home” element={<MyHome></MyHome>}/>  


<Navigate to=””  replace={true:false}></Navigate> 
import {Navigate} from ‘react-router-dom’
<Navigate> ,컴포넌트는 , 이벤트 발생시, 이동하지않고 ,바로 redirect 시킬때 사용한다.
페이지에서 클릭 또는 처리 후 이동하기 보다 asp 의 Response.redirct 처럼 강제적으로 페이지를 이동시킬때

예를들어,

App.js
import React from ‘react’
import { Navigate} from ‘react-router-dom’

function App(){
 
// 만약 로그인 되어있지않다면 로그인 페이지로 리다이렉트 replace={true} 이기때문에 뒤로가기 history 없음
 if (!isLogin) 
      return <Navigate to=”/Login”  replace={true}></Navigate> 

  return <div> my App </div>
}

export default App;

useNavigate 훅(HOOK) 사용하기
const useNavi = useNavigate();
javascript 의 location.href=”” 와 같이 페이지를 다른곳으로 이동 시킬수 있다 
단, url 이 아닌, 라우터 경로로 보내므로 라우터<Routes> 의 path 를 지정해준다.

useNavi(‘/Home’)  //  http://localhost/Home 으로 이동 – 뒤로가기가능
useNavi(‘/Home’ , {replace : true})  //  http://localhost/Home 으로 이동 뒤로가기 불가능 (location.replace 효과)

App.js
import {useNavigate} from ‘react-router-dom’

function App(){

  

  const usenavigate = useNavigate();

  function goUrl(u)
  {    
       usenavigate(u)  
       usenavigate(u , {replace:true}) ;  // replace:true  일 경우 history 남기지않음 뒤로가기안됨
  }

  return(
      <div>       
        <Link to=”/Home”>홈</Link>
        <Link to=”/Board”>보드</Link>
        <Link to=”/Intro”>인트로</Link>
        <button onClick={() => goUrl(“Board”)}>goBoard</button>
        <button onClick={() => goUrl(“Intro”)}>goIntro</button>
      </div>
  )
}

 

ㆍUrl 파라미터 및 경로 파싱 Hook 다루기

{useParams}  Hook

url 파라미터 다루기  /Home/:param1/:param2 

★ <route>의 path 에 경로 설정에 파라미터 변수명을 설정해 놓는다.

index.js
import {BrowserRouter} from ‘react-router-dom’

  <BrowserRouter>
         <App />   (App 컴포넌트안에 , <Routes/> <Route/> 컴포넌트가순서있게 유지되고있음)
         <Routes>           
                <Route path=”/Home/:username/:userage” element={<Home></Home>}/>

               // url 파라미터는 path 에 지정된 갯수된 만큼의 호출에서만 작동하므로, 각각 지정해줘야 모두 작동함
               <Route path=”/Home/:username” element={<Home></Home>}/>
               <Route path=”/Home/:username/:userage” element={<Home></Home>}/>   
               <Route path=”/Home/:username/:userage/:usernickname” element={<Home></Home>}/>   

         </Routes>       

  </BrowserRouter>

  Home.js
  import  {useParams} from ‘react-router-dom’

   function Home()
   {
            const myParams = useParams();

            return(
                <div>                      
                         <div> name :{myParams.username} </div>

                         <div> age:{myParams.userage} </div>
                         <div> nick name:{myParams.usernickname} </div>
                </div>
            )
   }
 * <Route> Path 의 설정한 파라미터(갯수)를 만족해야만 라우팅 된다
   <Route path=”/Home/:username/:userage” element={<Home></Home>}/>
   http://localhost/Home/Steven/30  → Home 뒤에 username  과 userage  2개의 파라미터 만족 , Home 이동
   http://localhost/Home/Steven/  →:age 가 빠짐 Home 이동안함No routes matched location “/Home/Steven” 

   ▶ 필요한 url 파라미터가 있다면 ,  경로에 파라미터 갯수 만큼 모두 설정해야함

   <Route path=”/Home/:username” element={<Home></Home>}/>
   <Route path=”/Home/:username/:userage” element={<Home></Home>}/>   
   <Route path=”/Home/:username/:userage/:usernickname” element={<Home></Home>}/>

     

{useSearchParams} Hook

Url 쿼리스트링 다루기 /Home?username=steve&age=20

 const [ searchParams , setSearchParams] = useSearchParams();
 searchParams : 쿼리스트링으로 받은 key=value 가 객체 {  key : value , key : value }  형식으로 있음
 setSearchparams({key : 변경 , key:변경}) : 객체형식으로 key:value 변경가능

index.js
import {BrowserRouter} from ‘react-router-dom’

  <BrowserRouter>
         <App />  
         <Routes>
              <Route path=”/Home” element={<Home></Home>}/> 
              <Route path=”/Home/:username” element={<Home></Home>}/>
               <Route path=”/Home/:username/:userage” element={<Home></Home>}/>   
               <Route path=”/Home/:username/:userage/:usernickname” element={<Home></Home>}/>   

         </Routes>       

  </BrowserRouter>


 

Home.js
http://localhost:3000/Home?username=test&userage=100
import {useSearchParams} from ‘react-router-dom’

function Home()
{
    const [ searchParams , setSearchParams] = useSearchParams();
    const username = searchParams.get(“username”)
    const userage = searchParams.get(“userage”)
    const myparam = useParams();  

  //   비동기 업데이트  아래 console.log 에 값이 바로 적용 안됨
  // setSearchParams( {username , userage > 18 ? ‘Adult’ , ‘child’}) 

  // console.log(searchParam.get(‘userage’))

    function changeParam(){      
        setSearchParams( {username , userage : userage > 18 ? ‘Adult’ : ‘child’})
    }

    return (
        <div>
            <div>Home</div>
            <div>Param:{myparam.username}</div>
            <div>Param:{myparam.userage}</div>

            <div>Home</div>
            <div>Query Param:{username}</div>
            <div>Query Param:{userage}</div>

            <button onClick={changeParam}>수정</button>
        </div>
    )
}
{useLocation} Hook
1차원적으로 Url 과 쿼리스트링을 파싱하여 , pathname , search , key , hash 등으로 구분하여 얻을수없음

App.js
import {useLocation} from ‘react-router-dom’

const location = userLocation();

function Home()
{
  const location = useLocation();
   
    return (
        <div>
            <div>location.pathname : {location.pathname}</div>
            <div>location.search : {location.search}</div>
            <div>location.hash : {location.hash}</div>
            <div>location.state : {location.state}</div>
            <div>location.key : {location.key}</div>
        </div>
    )
}

[호출]
http://localhost:3000/Home?username=test&userage=30#find

[출력]

location.pathname : /Home
location.search : ?username=test&userage=30
location.hash : #find
location.state :
location.key : default


Published by pluginn

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다