[ React ] useLocation(), useParams() 주소창 url 가져오기

npm

$ npm install react-router-dom

App.js

 

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import Main from './components/main/Main';
import Article from './components/article/Article';

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Main />} />
                <Route path="/article/:id" element={<Article />} />
            </Routes>
        </Router>
    );
};

export default App;

 

Main.js

import { useNavigate } from 'react-router-dom';

const Main = () => {

    const navigation = useNavigate();

    const move = () => {
        navigation('/article/abc');
    };
    
    return (
        <div>
            <button onChange={move}>이동</button>
        </div>
    );
};

export default Main;

 

Article.js

import { useLocation, useParams } from 'react-router-dom';

const Article = () => {

    const location = useLocation();
    const params = useParams();
    
    console.log(location); // hash, key, pathname, search, state
    console.log(params); // {id: 'abc'}
    
    return (
        <div>article</div>
    );
};

export default Article;

 

useLocation으로 받을때는 전체 주소를 받을 수 있습니다.

:: ) useNavigate()에 state를 추가해서 보낼수도 있습니다.

useParams로 받을때는 변수부분(:id)만 따로 받을 수 있습니다.