리액트 Router (Feat. react router dom)

리액트에서 Router를 나누기 위해 react router dom 이라는 것을 사용한다.

 

1.설치 npm install react-router-dom을 이용해서 설치를 해준다.

 

index.js를 열고 아래 코드처럼 추가할 부분을 추가해준다

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'; //추가할 부분

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter> {/* 추가할 부분 */}
      <App />
    </BrowserRouter> 
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

2.Router를 사용할 App.js

 

import './App.css';
import Menu from './components/Menu'; //미리 컴포넌트를 만들어서 세팅
import CreateUser from './components/CreateUser';
import UpdateUser from './components/UpdateUser';
import DeleteUser from './components/DeleteUser';
import UserList from './components/UserList';
import Home from './components/Home';



import {Link, Route, Switch} from 'react-router-dom';

function App() {
  
  return (
    <div className="App">
      <Menu></Menu>
      {/* exact를 안쓸경우 / 같은경우 하위페이지에 계속나온다 = Home컴포넌트 페이지가 계속 겹침 */}
      {/* 사용할 부분을 Route로 감싸고 들어오려는 path와 보여줄 component를 설정한다.*/}
      <Route exact path='/' component={Home}></Route> 
      <Route path='/CreateUser' component={CreateUser}></Route>
      <Route path='/UpdateUser' component={UpdateUser}></Route>
      <Route path='/DeleteUser' component={DeleteUser}></Route>
      <Route path='/UserList' component={UserList}></Route>
    </div>
  );
}

export default App;

 

3. Menu를 통해서 페이지를 이동할 예정 - Menu.js

import './css/common.css';
import {Link, Route, Switch} from 'react-router-dom';

function Menu(){

    return(
        <div className="side">
            <div className="nav">
                <ul>
                	{/*Link to를 이용하여 이동할 경로*/}
                    <Link to="/CreateUser"><li>Create User Page</li></Link>
                    <Link to="/UpdateUser"><li>Update User Page</li></Link>
                    <Link to="/DeleteUser"><li>Delete User Page</li></Link>
                    <Link to="/UserList"><li>User List</li></Link>
                </ul>
            </div>
        </div>
    )
}

export default Menu;

화면 결과