-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
react-router-dom@6으로 할때
22.11.28 17:06 작성 조회수 291
0
import React from "react";
import { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
const BlogForm = () => {
const navigate = useNavigate();
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
const onSubmit = () => {
axios
.post("http://localhost:3001/posts", {
title,
body,
})
.then(() => {
navigate("/blogs");
});
};
react-router-dom@6으로 할때 useNavigate 를 사용해서 구현하려고 하는데요 저렇게 코드를 짰는데 blogs 페이지로 넘어가질 않습니다.
useNavigate 를 사용할때는 어떻게 해야 블로그 페이지로 넘어갈 수 있나요??
----------------------------------------------------
해결했습니다!
답변을 작성해보세요.
0
foxball
2022.11.30
셋팅은 index.js 파일로 가서
import { BrowserRouter } from "react-router-dom";
<BrowserRouter> 이걸로 <App/> 이걸 감싸면 끝입니다.
0
코지 코더
지식공유자2022.11.28
App.js 파일도 올려주시겠어요? Router 세팅이 6은 좀 달라서 안되는 것일수도 있고 아님 다른 부분이 문제일수도 있어서 제공해주신 정보로는 답변을 드리기가 어렵겠네요.
연말이나 연초에 reacr router 6로 업그레이드 하는거 영상 만들어서 추가 할 계획이 있으니 6 사용하는데 너무 계속 막히면 일단 5로 사용하시다가 나중에 6 보셔도 될거 같아요
wsws
질문자2022.11.28
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import routes from "./routes";
function App() {
return (
<Router>
<NavBar />
<div className="container mt-3">
<Routes>
{routes.map((route) => {
return (
<Route
key={route.path}
path={route.path}
element={<route.element />}
/>
);
})}
</Routes>
</div>
</Router>
);
}
export default App;
App.js입니다.
답변 2