React.js (2) React Router v6

Bada Jung·2022년 1월 10일
0

React

목록 보기
2/11
post-thumbnail

Switch -> Routes

component -> element

기존 리액트 라우터 방식 v5

import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "./Home";
import Login from "./Login";

function App() {
  return (
    <BrowserRouter>
      <Switch>
       <Route path="/" exact render={() => <Home />} />
       <Route path="/Login" exact component={Login} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

새로 업데이트 된 v6

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./home";
import Login from "./login";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/login" element={<Login />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;
profile
🌊🌊Under the SEA🌊🌊

0개의 댓글