[React] React 화면 전환

• Link 링크
  • 링크는 리액트 내에서 페이지 전환해준다

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

import Home from "./Home";

function App() {
	return(
		<div className="App">
			<div>
				<Link to="/">Home으로</Link>
			</div>
//실제 연결
		<Route path="/" exact component={Home}>
			<Home />
		</Route>
		</div>
	);
}

• history
  • Link 컴포넌트를 클릭하지 않고 페이지를 전환하는 방법
  • props로 history 객체를 받아 이동

import React from 'react';

const Home = (props) => {
	
	return (
		<div
			onClick={() => {
				props.history.push("/");
}} >
			화면
		</div>
	);
};

export default Home

• props를 받지 않고 useHistory 훅을 사용하기

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

const Home = (props) => {
	let history = useHistory();
	retrun (
		<button
			onClick={() => {
			history.push("/");
}}>
		화면
		</button>
	);
};