react-router(2)
-
[React] react-router (Switch, Link, exact, render, useHistory)
Switch 라는 태그는 자식인 들 중에서 현재 URL과 일치하는 첫번째 것을 렌더해준다. import React from "react"; import { BrowserRouter, Route, Switch } from "react-router-dom"; import "./app.css"; import Home from "./components/home"; import Profile from "./components/profile"; function App() { return ( ); } export default App; 이렇게 작성하면 경로에 맞는 컴포넌트를 렌더해주는 것이다. Link Switch 안에서가 아니더라도 Link를 이용하면 원하는 컴포넌트로 이동할 수 있다. (마치 html의 a 태그의..
2021.05.13 -
[React] react-router에서 render 이용해서 컴포넌트 보여주기
react-router에서 해당하는 경로에 맞는 컴포넌트를 렌더하는 방법은 3가지가 있다. 1. 의 자식으로 렌더하는 방법 import React from "react"; import { BrowserRouter, Link, Route} from "react-router-dom"; import "./app.css"; import Home from "./components/home"; import Profile from "./components/profile"; function App() { return ( ); } export default App; 하지만 위와 같이 쓰면 route 관련 props인 location, history, match를 받아올 수 없다. 2. 를 이용하여 렌더하는 방법 impo..
2021.05.13