react-router-dom@6으로 할때

프로젝트로 배우는 React.js

34 생성 후 리스트 페이지로 이동

작성

416

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 를 사용할때는 어떻게 해야 블로그 페이지로 넘어갈 수 있나요??

----------------------------------------------------

해결했습니다!

react redux es6

답변 2

foxball

셋팅은 index.js 파일로 가서

import { BrowserRouter } from "react-router-dom";

<BrowserRouter> 이걸로 <App/> 이걸 감싸면 끝입니다.

코지 코더

지식공유자

App.js 파일도 올려주시겠어요? Router 세팅이 6은 좀 달라서 안되는 것일수도 있고 아님 다른 부분이 문제일수도 있어서 제공해주신 정보로는 답변을 드리기가 어렵겠네요.

연말이나 연초에 reacr router 6로 업그레이드 하는거 영상 만들어서 추가 할 계획이 있으니 6 사용하는데 너무 계속 막히면 일단 5로 사용하시다가 나중에 6 보셔도 될거 같아요

wsws

질문자

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입니다.

코지 코더

지식공유자

소스코드 전체를 깃헙에 올려서 링크 올려주시면 확인 해볼게요

인프런 커뮤니티 질문&답변

react-router-dom@6으로 할때