[React] Router 버튼클릭시 주소이동

버튼 만들어주고 클릭 이벤트 걸어주기 

 

App.js 

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

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

    } 
  }
  moveHome=()=>{
    window.location.href='/' //로케이션 객체 
  }

  moveProfile=()=>{
    window.location.href='/profile'
  }

  render(){
    return(
      <div id='App'>
        <button onClick={this.moveHome}>홈</button>
        <button onClick={this.moveProfile}>프로필</button>
        <BrowserRouter>
          <Routes>
            <Route path='/' element={<Home/>}/>
            <Route path='/profile' element={<Profile/>}/>
          </Routes>
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

 

 

 

라우터 사용하여 티스토리 페이지 만들기 연습해보기 

버튼이 많으니까 탭 컴포넌트 따로 만들어주기