react-router-dom

1. 설치는 npm install -save 로  react-router-dom@6 로 하면 6.0.2버전 등이 설치되며 기본사용법은 아래와 같이 <BrowserRouter> 밑에 <Routes>를 두고 그 밑에 여러개의 <Route>를 넣는 방식이다.

 

import {BrowserRouter, Routes, Route> from "react-router-dom"
import SubSystem1 from "./SubSystem1.js" 
import Admin from "./Admin.js"

export default cont HomePage = () => {

	return (
    	<>
        	<BrowserRouter>  //최상단
           		<Routes> //Router 여러개 포함
        			<Route path="/" element={<SubSystem1 />} />   //에전엔 component였는데 6부턴 element로 바뀜
        			<Route path="/admin" element={<Admin />} />
        
        		</Routes>
    		</BrowserRouter>
    	<>
    )

}

 

2. 혹시 첫 페이지에 간단한 링크를 넣고싶다면

<BrowserRouter>와 <Routes>사이에 아래 코드블락 같은걸 넣으면 된다.

Link도 react-route-dom에서 import하는건데,  <a href는 화면을 refresh하면서 가지만 Link는 refresh없이 변경되므로 뛰어나다.

 

 

    <nav>

          <Link to="/"> Home </ Link>

           <Link to="/admin"> admin </Link>   

    </nav>

 

3. <Link> 보다 조금 발전되어 active일 경우 style등을 넣는다던지 className을 넣는다던지 하고싶으면 <NavLink>를 사용하면 된다.  

<NavLink className="myclass" to="/"> Home </NavLink>

 

3.1  className을 좀더 발전시키면 className={({isActive}) => "myClass" + (isActive?"blue":""}

==> 이 경우 styles.scss 를 import를 하고 여기에 아래와 같이 css를 설정할 수 있다.

nav {
	a{
    	padding: 2em;
        font-size: 2em;
        &.blue{background-color: #00f;}
	}
}

3.2 위에서 &는 상위부모 (여기서는 a)를 치환한다고 보면되는데 자세한 설명은 REF참고.