[React] Router 를 이용한 페이지 이동

npx create-react-app react-router0611

 

터미널 열어서 다운로드 해주기 

npm install react-router-dom

다운로드 완료되면 package.json 에서 확인해야됨.

 

 

App.js 클래스형 컴포넌트로 변경 

import { Component } from 'react';
import './App.css';

class App extends Component{
  constructor(props){
    super(props)
    this.state ={

    } 
  }
  render(){
    return(
      <div id='App'>

      </div>
    )
  }
}

export default App;

 

 

2. 라우터 돔 임포트하고 주소 지정해주기 

Home = /

Profile = /profile

import { Component } from 'react';
import './App.css';
import {BrowserRouter, Routes, Route} from 'react-router-dom';

class App extends Component{
  constructor(props){
    super(props)
    this.state ={

    } 
  }
  render(){
    return(
      <div id='App'>
        <BrowserRouter>
          <Routes>
            <Route path='/' element={<Home/>}/>
            <Route path='/profile' element={<Profile/>}/>
          </Routes>
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

3. components폴더에  Home.js , Profile.js  / css폴더, 파일 만들어주기 

   App.js 에 임포트

   App.css 기본 설정 

*{
  margin: 0;
  padding: 0;
}

ul{
  list-style-type: none;
}

a{
  text-decoration: none;
}

#App{
  width: 1200px;
  height: 700px;
  background-color: rosybrown;
  margin: 0 auto;
}

4. Home.js 함수 컴포넌트로 써주기 

이벤트가 딱히 없기 떄문에 

import '../css/Home.css';

function Home(){
    return(
        <div id='home'>
            홈
        </div>
    )
}
export default Home;

#home{
    width: 90%;
    height: 90%;
    margin: 0 auto;
    background-color: palegoldenrod;
}

 

Profile.js 도 함수형으로 만들어주기

import '../css/Profile.css';

function Profile(){
    return(
        <div id='profile'>
            프로필
        </div>
    )
}
export default Profile;

#profile{
    width: 90%;
    height: 90%;
    margin: 0 auto;
    background-color: palegreen;
}

 

 

npm start 하면 첫화면은 Home.js 화면이 떠야함 

localhost:3000

localhost:3000/profile

Profile.js 뜨는지 확인 

localhost:3000/profile