리액트 Route 사용시 URL만 바뀌고 화면이 재렌더링 되지 않을 때

 

 

리액트에서 Link와 Route를 쓰면 자꾸 브라우저 주소창에 url만 바뀌고 컴포넌트가 재렌더링 되지 않아 화면이 바뀌지 않았다.

 

 

그래서 해결한 방법은 원래 쓰던 react-route-dom 5.3.0 버전을 삭제하고 6.3.0 버전을 까는 것.

 

그리고 아래 코드와 같이 제일 바깥 쪽에 <BrowserRouter>로 한번 감싸고 그 안에서 <Routes>로 한번 더 감싸고 <Route>를 작성해 주는 것이다.

 

 

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import "./App.css";


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