react-router-dom

리액트 서브 라우터

리액트 라우터를 사용하긴 했지만 서브 라우터 , 이중 라우터를 사용한적이 없었다.
이번에 동아리 웹 프로젝트를 진행하면서 서브 라우터도 가능한것을 알게 되어서 라우터에 대해서 깊게 공부를 하게되었는데

사용법은

App.jsx

import React from 'react';
import { hot } from 'react-hot-loader';
import { Link, Route, Switch } from "react-router-dom";
import PropTypes from 'prop-types';

import './assets/css/style.scss';

import Activity from '../pages/activity/main'

const Main = () => {

    return (
        <main className="main">
            <Switch>
                <Route path="/activity" component={Activity}></Route>
            </Switch>
        </main>             
    )
}

export default hot(module)(Main);

subrouter.jsx

import './assets/css/project.scss';
import React, { useState, useEffect } from 'react';
import Fristpage from './activities/activities'
import Secondpage from './activitylist/activitylist'
import { Route, Switch } from 'react-router-dom';


function App({ match, history }) {

    return (
        <div className="App">

                <React.Fragment>
                    <Route exact path={match.path} component={Fristpage} >
                        <Fristpage match={match} history={history} />
                    </Route>
                    <Route path={`${match.path}/:id`} render={({match,history,location})=>(
                        <Secondpage location={location} history={history} match={match} />
    )}>
                    </Route>
                </React.Fragment>
        </div>
    );

}

export default App;

부가 설명

우선 이런 구조로 되어 있다고 생각하면 app.js에서 라우팅을 해주고
subrouter.jsx 에서 한번 더 라우팅을 한다 match.path에는 현재 주소 , path에 대한 정보가 담겨있다.

이런식으로 parmas , path , url 등이 있는데
이 객체에 대해선 다음에 설명하고
subrouter는 path가 /activity 이다
그래서 처음에 들어오면 fristpage가 보이게 해두었는데
서브라우터에 path를 보면 path = {match.path} 라고 작성을 했는데
match.path는 위에 사진과 같이 path에는 현재 path에 대한정보 즉 /activity 일 경우에 fristpage컴포넌트가 보이도록 해두었고
밑에 secondpage 는 path가 ${match.path}/:id 이렇게 되어있는데
id는 파라미터 이다.

라우터 파라미터 전달과 match

처음에는

<Route path={`${match.path}/:id`}  component={Secondpage}>
<Secondpage location={location} history={history} match={match} />
  </Route>
    )}>

이런식으로 secondpage에 prop와 파라메터 정보를 받아 올 수 있게 match ,history ,location을 넘겨주었는데
match 정보에는 path에는 /activity 이렇게 뒤에 /:id 라는게 빠져있었다.
라우터 link를 이용해서 link to 로 state로 파라메터를 전달할 수 있지만
부모에서 넘겨주고 싶었기때문에 link to 로는 전달이 불가했다.

해결법

처음에는

import { useParams } from 'react-router-dom';
const a = useParams();

를 사용해서 파라메터값 , id값이 받아와졌지만 야매로 하는것 같에서 구글링을 하면서 해결법을 찾았다.
부모에서 props를 넘겨주는 방법에는

<Route path={match.path} component={()=><Fristpage props ={props}/> match={match} } >

이런식으로 넘겨 줄 수 있지만 성능상으로 좋지않아서

<Route path={match.path} render={()=>(
    <Fristpage props ={props} match={match}/>)	} >

render를 이용해서 넘겨주는게 성능적으로 좋다고 한다
하지만 이렇게 하여도 match에 parms안에는 id값이 들어가지 않았다... 절망...🎇
하지만

<Route path={`${match.path}/:id`} render={({match,history,location})=>(
	<Secondpage location={location} history={history} match={match} />
    )}>  

이런식으로 render={({match})=>} 이렇게 match값을 넘겨주니

짜잔! 이렇게 params 안에 id값이 똭!..
어제부터 하루종일 이게 제대로 안넘어가져서 삽질을 했는데 드디어...params값이 정확하게 나온다!!
나름 리액트는 좀 할줄안다고 생각했는데 아직 한참 멀었나보다...
그렇게 이틀동안 삽질해서 params값이 정상적으로 나오고 props들도 부모에서 자식 라우터로 전달을 할수있게 되었다!!!
서브라우터 사용법도 이제 제대로 알고 props , params들도 제대로 받아올 수 있었다..

후기?

기능적으로 바뀐건 없지만 원하는 방식으로 값을 전달할 수 있어서 정말 좋았다..
삽질을 얼마나 더 해야 고수가 될 수 있을까...