React-router - (URLSearchParams(location.search).get('keyword')

ReactJS - (URLSearchParams(location.search).get('keyword')

react-router v4 version4

sorce code는 이전 문서에서 재활용한다.

/...../ 는 생략되었다는 표시임

파란 글씨는 추가된 것임

빨간 글씨는 수정된 것임

 

렌더링된 검색 키워드를 파싱해서 출력해주기

~cra-router/src/routes$ Search.js

import React from 'react';

const Search = ({location}) => {

    return (

        <div>

            {new URLSearchParams(location.search).get('keyword')}

            검색

        </div>

    );

};

export default Search;

~cra-router/cra/components$ Header.js

import React from 'react';

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

import './Header.css';

const Header = () => {

    return (

        <div className="header">

            <NavLink exact to="/" className="item" activeClassName="active">홈</NavLink>

            <NavLink to="/about/boolean" className="item" activeClassName="active">소개</NavLink>

            <NavLink to="/posts" className="item" activeClassName="active">포스트</NavLink>

            <NavLink to="/login" className="item" activeClassName="active">로그인</NavLink>

            <NavLink to="/mypage" className="item" activeClassName="active">마이페이지</NavLink>

            <NavLink to="/search" className="item" activeClassName="active">검색</NavLink>

        </div>

    );

};

export default Header;

~cra-router/cra$ App.js

import React  from 'react';

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

import Home from './routes/Home';

import About from './routes/About';

import Posts from './routes/Posts';

import Login from './routes/Login';

import MyPage from './routes/MyPage';

import Search from './routes/Search';

import Header from './components/Header';

const App = () => {

    return (

            <Router>

                <div>

                    <Header />

                    <Route exact path='/' component={Home} />

                    <Route path='/about/:username' component={About} />

                    <Route path='/posts'  component={Posts} />

                    <Route path='/login'  component={Login} />

                    <Route path='/mypage'  component={MyPage} />

                    <Route path='/search'  component={Search} />

                </div>

            </Router>

    )

}

export default App;