1. Switch ➡ Routes

exact는 사용하지 않고 여러개를 매칭하고 싶은 경우, *을 사용한다.

// v5 app
function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

//v6 app
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

2. useHistory ➡ useNavigate

history.push와 history.replace또한 navigate로 사용한다.

현재위치를 교체해야하는경우, navigate(to, {replace:true})를 사용한다.
state가 필요한경우, navigate(to, {state})를 사용한다.

go,goBack,goForward의경우, 숫자를 통해 나타내야한다.

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

function App() {
  let history = useHistory();
  const { go, goBack, goForward } = useHistory();
  
  function handleClick() {
    history.push("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
       <button onClick={() => go(-2)}>
        Go 2 pages back
      </button>
       <button onClick={goBack}>Go back</button>
      <button onClick={goForward}>Go forward</button>
    </div>
  );
}

//v6
import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
      <button onClick={() => navigate(1)}>
        Go forward
      </button>
      <button onClick={() => navigate(2)}>
        Go 2 pages forward
      </button>
    </div>
  );
}