urlParams , 쿼리

import React from 'react'
import About from "./pages/About"
import Home from "./pages/Home"
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

const App = () => {
  return (
    <>
    <Router>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/about" component={About}/>
        <Route exact path="/about/:username" component={About}/>        
      </Switch>
    </Router>
    </>
  )
}

export default App

import React from 'react'

const Home = (props) => {
  //쿼리는 라우트 컴포넌트에 props로 전달되는 location객체의 search 값에서 읽을수 있으며
  //location 객체는 현재 앱의 주소를 전달한다.
  const searchParams = new URLSearchParams(props.location.search);
  console.log(searchParams)
  return (
    <div>
      home
    </div>
  )
}

export default Home