React 라우터 사용 방법

설치

npm install react-router-dom

라우터 포함

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import About from './About';
import Home from './Home'; 
import Navbar from './Navbar'; 

function App() {
  return (
      <BrowserRouter>
        <Navbar /> 

        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/about" component={About}/>
        </Switch>

      </BrowserRouter>
  );
}

export default App;

NavLink 추가

import React from 'react';
import {NavLink} from 'react-router-dom'
import './App.css'; 

export default function Navbar() {
    return (
        <div>
            <NavLink 
                activeClassName="selected"
                className="not-selected"
                to="/"
                exact
                >HOME</NavLink>
            <NavLink 
                to="/about"
                activeClassName="selected"
                className="not-selected"
                exact
                >ABOUT
            </NavLink>
        </div>
    )
}

useHistory 후크

import React from 'react'; 
import {useHistory} from 'react-router-dom'; 

export default function About() {
    const history = useHistory()

    const handleClick = () => {
        history.push('/')
    }

    return (
        <div>
            <h1>ABOUT</h1>
            <p>THIS IS THE ABOUT PAGE</p>
            <div>
                <button 
                    onClick={handleClick}>
                    Back to Home
                </button>
            </div>
        </div>
    )
}