useParams

##들어가기
follow, unFollow에 들어가기 이전에 useParams, keyField에 대해서
알아보고 넘어가자

1.useParams

->avatar나 username등을 클릭했을때, user의 Profile page로 넘어가게 하는것
->주소는 localhost:3000/users/(*ex.username)으로 주소가 이루어진다.
->Profile.js page는 다음 Post에서 다루기로 한다.

1. src/App.js

*부분만 참고할 것

return (
    <ApolloProvider client={client}>
      <HelmetProvider>
        <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
          <GlobalStyles />
          <Router>
            <Routes>
              <Route
                path={routes.home}
                exact
                element={
                  isLoggedIn ? (
                    <Layout>
                      <Home />
                    </Layout>
                  ) : (
                    <Layout>
                      <Login />
                    </Layout>
                  )
                }
              />
              {isLoggedIn ? null : (
                <Route path={routes.signUp} element={<SignUp />} />
              )}
**********************************************
              <Route
                path={`/users/:username`}
                element={
                  <Layout>
                    <Profile />
                  </Layout>
                }
              />
              ///path는 {`/users/:username`}로 해줌, :username하면 알아서 
              ///username으로 찾아감. ex. users/kjm 등등..
              ///element 즉, 이동 page는 Profile로 해서 pages에 page를 만든다.
              ///Layout은 Profile에 header를 씌워주기 위해서 덮어준 것임.
*****************************************
              <Route path="/nomad" element={<Nomad />} />
            </Routes>
          </Router>
        </ThemeProvider>
      </HelmetProvider>
    </ApolloProvider>
  )
  

2. src/components/feed/Photo.js

    return(
        <PhotoHeader>
          <Link to={`/users/${user.username}`}>
            <Avatar lg url={user.avatar} />  ///Photo부분의 아바타 클릭시 Link걸어줌
          </Link>
          <Link to={`/users/${user.username}`}>
            <Username>{user.username}</Username> ///Photo부분의 username 클릭시 Link걸어줌
          </Link>
        </PhotoHeader>
        <PhotoFile src={file} />
        
        ///모든 Page 혹은 component에 avatar, username에 
        ///Link to={`/users/${username}`}을 걸어줌, '/' 꼭 빠뜨리지말것!
  .
  .
  .
  

3. Profile.js

  import { useParams } from 'react-router-dom'
  
  function Profile() {
  const { username } = useParams()
  console.log(username)
  }

localhost:3000/users/kjm
으로 페이지가 link되어서 Profile page로 이동하게 되면,
useParams를 이용해서 username을 받을 수 있음.
console.log 확인해 보면됨.
useLocation으로도 params 받는 거 가능함.