[React] Route로 페이지 이동하기 (5) - 글쓰기 버튼 클릭 시 페이지 이동

목표

 + 버튼을 누르면 글쓰기 페이지로 이동하고 싶음

 - Route 사용

 - <Link to=""></Link> 사용

 - http://localhost:3000/write (글쓰기 페이지 주소)

 

 

Route 라이브러리 설치

- React 터미널 열기

npm install 'react-router-dom'

App.js

- 'react-router-dom' 라이브러리 임포트

- <Route path='{http://localhost:3000 이후 주소}' component={import 한 리액트 파일 이름}> 로 라우팅

import { BrowserRouter as Routes, Route, Switch } from 'react-router-dom';
import Write from './BoardList/Write.js';
import BoardList from './BoardList/BoardList.js';

function App() {
    return (
        <div>
            <Routes>
            	<Route path='/write' component={Write} />
                <Route path='/' component={BoardList} />
            </Routes>
        </div>
    );
}

export default App;

- http://localhost:3000 으로 접근 -> <BoardList/> 로 매핑

- http://localhost:3000/write 로 접근 -> <Write/> 로 매핑

- <Routes> 말고 <Router>로 할 경우 아래 에러 발생 (버전 차이)

Route 에러

 

 

Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>

 

번역

잡히지 않은 오류: <Route>는 <Routes> 요소의 자식으로만 사용되며 직접 렌더링되지 않습니다. <Route>를 <Routes>로 감싸주세요.

 

 

 

에러 참고

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Rout

결과

 

- <Write>와 <BoardList> 둘 다 실행되는 오류 발생

=> <Switch> 태그로 <Route> 감싸기

 

 

 

 

App.js 수정

import { BrowserRouter as Routes, Route, Switch } from 'react-router-dom';
import Write from './BoardList/Write.js';
import BoardList from './BoardList/BoardList.js';

function App() {
    return (
        <div>
            <Routes>
            	<Switch>
            		<Route path='/write' component={Write} />
                	<Route path='/' component={BoardList} />
                </Switch>
            </Routes>
        </div>
    );
}

export default App;

주의사항

- 아래처럼 <Route>의 순서를 바꾸지 않기 

- 'http://localhost:3000/' 뒤에 어떤 주소가 들어오더라도 BoardList로 매핑되어 개발자 의도대로 움직이지 않기 때문

=> 세부 주소일수록 위에 두자.

<Route path='/' component={BoardList} />
<Route path='/write' component={Write} />

WriteButton.js

import './WriteButton.css';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { Link } from 'react-router-dom';

function WriteButton() {

  return (
    <div>
        <button className='write__button'>
            <Link to="/write">
            <i><FontAwesomeIcon icon={faPlus} size="4x"/></i>
            </Link>
        </button>
    </div>
  );
}

export default WriteButton;

- <button> 태그 내부에 <Link> 태그 삽입

- 버튼을 누르면 'http://localhost:3000/write' 페이지로 이동

결과

참고

[React] React-Router를 활용해 원하는 페이지로 이동하기

 

[리액트] 페이지 이동(Routes)