BrowserRouter

import { BrowserRouter as Router } from 'react-router-dom';

BrowserRouter 그대로 사용해도 되지만 이름이 너무 길기때문에
Router 로 바꿔서 사용하도록 한다.

컴퍼넌트 연결하기

import { Route } from 'react-router-dom';

return (
  <div>
  	<Route exact={true} path="/" component={Home}/>
  	<Route exact={true} path="/test" component={Test}/>
  </div>

해당하는 url 로 가게되면 연결한 component 가 보이게 된다.

React Link

React 에서는 a 태그를 사용하기보다 Link 를 사용해서 다른 주소로 이동하게 된다.
React 에서는 특정 component 만 rendering 이 되지만 , a 태그 같은경우는 페이지가 전체가 새로 rendering 됩니다.

하지만 Link 를 사용하게 되면 주소가 바뀔뿐이지 실제적인 페이지가 바뀌지는 않는다.

<Link to="/test">Test Compoent</Link>

Rouer , Link

import React from 'react';
import { Route, Link } from 'react-router-dom';
import Test from './Test';
import Home from './Home';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">home</Link>
        </li>
        <li>
          <Link to="/test">test</Link>
        </li>
      </ul>
      <hr />
      <Route path="/" exact={true} component={Home} />
      <Route path="/test" exact={true} component={Test} />
    </div>
  );
};

export default App;

function component

import { useHistory } from "react-router-dom"; 사용

import { useHistory } from "react-router-dom";

const Cart = () => {
  let history = useHistory();
  return (
    <div>
      <span>Cart Page</span>
      <button
        onClick={() => {
          history.push("/");
        }}
      >
        Go Main
      </button>
    </div>
  );
};

export default Cart;

class component

const { history } = this.props; 사용

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Home extends Component {
  render() {
    const { history } = this.props;

    return (
      <div>
        Home
        <p>
          <Link to="/products">Go Products</Link>
          <button
            onClick={() => {
              history.push("/cart");
            }}
          >
            Go page
          </button>
        </p>
      </div>
    );
  }
}

export default Home;