React - Dynamic Routing

• 동적 라우팅 설정 1
  • Route path에 /:{key}
  • key 값 가져오기
    • 해당 컴포넌트에서 props.match.params.[key]

// App.js
function App() {
  return (
    <BrowserRouter>
      <Route path="/profile" exact component={Profile} />
      <Route path="/profile/:id" component={Profile} />
    </BrowserRouter>
  );
}

// Profile.jsx
export default function Profile(props) {
  const id = props.match.params.id;
  console.log(id, typeof id);

  return (
    <div>
      <h2>Profile 페이지입니다.</h2>
      {id && <p>id는 {id}입니다.</p>}
    </div>
  );
}

---

• 동적 라우팅 설정 2
  • query string
    • npm i query-string
      
      
  • /about?name=msko 호출 시, 아래와 같이 처리

// About.jsx
import queryString from 'query-string';

export default function About(props) {
  const searchParams = props.location.search;
  const query = queryString.parse(searchParams);

  return (
    <div>
      <h2>About 페이지입니다.</h2>
      {query.name && <p>name은 {query.name} 입니다.</p>}
    </div>
  );
}