[React] 라우터를 이용한 로케이션 객체

Tab, Travel, Life 상태값 따로 없으니 함수형으로 만들어주기

import '../css/Tab.css';

function Tab(){
    const moveLife=()=>{
        window.location.href='/life'
    }
    const moveTravel=()=>{
        window.location.href='/travel'
    }
    return(
        <div id='tab'>
            <button onClick={moveLife}>라이프</button>
            <button onClick={moveTravel}> 트래블</button>
        </div>
    )
}

export default Tab;

import '../css/Life.css';

function Life(){
    return(
        <div id='life'>
            라이프
        </div>
    )
}

export default Life;

import '../css/Life.css';

function Travel(){
    return(
        <div id='travel'>
            트래블
        </div>
    )
}

export default Travel;

 

App에 임포트 해주기 

라우터 사용하고 있으니 라우터 install 했는지 패키지 확인 후 안되어 있으면 npm install 해주기

import { Component } from 'react';
import './App.css';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import Tab from './components/Tab.js';
import Life from './components/Life.js';
import Travel from './components/Travel.js';

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

    } 
  }

  render(){
    return(
      <div id='App'>
        <Tab/>
        <BrowserRouter>
          <Routes>
            <Route path='/life'   element={<Life/>}/>
            <Route path='/travel' element={<Travel/>}/>
          </Routes>
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

 

 

 

라이프/ 트래블 버튼 누르면 밑에 화면 바뀜