I am developing a simple application of notes, and when I try to edit the notes, I get the error "No routes matched location id ..."

What am I doing wrong?

I try to get the id of the note by params

This is my code:

Notes.js:

    import React from "react";
    import Header from "./notes/Header";
    import Home from "./notes/Home";
    import CrearNota from "./notes/CrearNota";
    import EditarNota from "./notes/EditarNota";
    import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
    
    export default function Notes({ setIsLogin }) {
      return (
        <header>
          <BrowserRouter>
            <Header setIsLogin={setIsLogin} />
    
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/create" element={<CrearNota />} />
              <Route path="/edit/:id" element={<EditarNota />} />
            </Routes>
          </BrowserRouter>
        </header>
      );
    }

And EditarNotas.js:

    import { useState, useEffect } from "react";
    import axios from "axios";
    import { useNavigate } from "react-router-dom";
    
    export default function EditarNota(match) {
      const [note, setNote] = useState({
        title: "",
        content: "",
        date: "",
        id: "",
      });
    
      const navigate = useNavigate();
    
      useEffect(() => {
        const getNote = async () => {
          const token = localStorage.getItem("tokenStore");
          if (match.params.id) {
            const res = await axios.get(`/api/notes/${match.params.id}`, {
              headers: { Authorization: token },
            });
            console.log(match.params.id);
            console.log(res);
            setNote({
              title: res.data.title,
              content: res.data.content,
              date: res.data.date,
              id: res.data._id,
            });
          }
        };
        getNote();
      }, [match.params.id]);
    
      const onChangeInput = (e) => {
        const { name, value } = e.target;
        setNote({ ...note, [name]: value });
      };
    
      const editNote = async (e) => {
        e.preventDefault();
        try {
          const token = localStorage.getItem("tokenStore");
          if (token) {
            const { title, content, date, id } = note;
            const newNote = {
              title,
              content,
              date,
            };
            await axios.post(`api/notes/${id}`, newNote, {
              headers: { Authorization: token },
            });
    
            return navigate.push("/");
          }
        } catch (err) {
          window.location.href = "/";
        }
      };
    
      return (
        <>
          <h2>Crear nota</h2>;
          <form on onSubmit={editNote} autoComplete="off">
            <div>
              <label htmlFor="title">Title</label>
              <input
                type="text"
                value={note.title}
                id="title"
                name="title"
                required
                onChange={onChangeInput}
              />
            </div>
            <div>
              <label htmlFor="content">Content</label>
              <input
                type="text"
                value={note.content}
                id="content"
                name="content"
                required
                rows="10"
                onChange={onChangeInput}
              />
            </div>
            <div>
              <label htmlFor="date">Date: {note.date}</label>
              <input
                type="date"
                id="date"
                name="date"
                required
                onChange={onChangeInput}
              />
            </div>
            <button type="submit">Guardar</button>
          </form>
        </>
      );
    }

It is my first post, if I have done something wrong, sorry and let me know.

Thanks in advance.

CodePudding user response：

I used useHistory instead of useNavigate.

import { useHistory } from 'react-router-dom'
...
const history = useHistory()
history.push("/")

There is a new useHistory hook in React Router >5.1.0 if you are using React >16.8.0 and functional components.

CodePudding user response：

From your code it seems match is a props.

instead of accessing it like this: export default function EditarNota(match)

try spreading the props like this: export default function EditarNota({match})

or this way:export default function EditarNota(props)

then where ever you have match change it to props.match.