URL-адрес браузера изменился после действий формы POST и PATCH в приложении React — Node

Во-первых, я хочу извиниться за очень длинный пост. Я новичок, и это поведение, которое я даже не знаю, как гуглить. Я постараюсь объяснить как можно лучше.

Я создаю простое приложение CRUD, используя Node, Express, React и Mongoose. Я начал с задней части и двигаюсь к передней части. Как только я соединил интерфейс с сервером, я заметил необычное поведение. Например, это мой контроллер postEditStudent:

exports.postEditStudent = (req, res, next) => {
  console.info(req.params)
  const id = req.params.id;
  console.info('this is body', req.body)
  Student.findByIdAndUpdate(mongoose.Types.ObjectId(id), {firstName : req.body.firstName, lastName : req.body.lastName})
    .then((stud) => {
      console.info('EDIT THIS GUY', stud);
      return res.status(200).redirect('/')
    })
    .catch(err => console.info(err));
}

Теперь, чтобы добраться туда, мы используем маршрутизатор:

const express = require('express');
const classController = require('../controllers/classController');
const router = express.Router();

router.get('/update/:id', classController.getEditStudent);
router.patch('/update/:id', classController.postEditStudent);

Что касается моей страницы server.js, то она настроена так:

const path = require('path');

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const cors = require('cors');
const session = require('express-session');

const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
  extended: true
}));


app.use(cors())


const classRoutes = require('./routes/class-routes');
const errorController = require('./controllers/error')

const MONGODB_URI = "mongodb+srv://this is a mongoose database path"

app.use('/teacher', authRoutes);
app.use('/class', classRoutes);
app.get('/', (req, res, next) => {
  
  res.sendFile(path.resolve(__dirname, "../docs/index.html"))
  next()
})

app.use(errorController.get404);


  mongoose
  .connect(MONGODB_URI)
  .then(result => {
    app.listen(3000);
    console.info('CONNECTED')
  })
  .catch(err => {
    console.info(err);
  });

И последний, но не менее важный компонент реакции, где происходит волшебство:

class App extends Component {
  
    constructor(props) {
        super(props);
        this.state = {
          students: null,
          edit: 'none',
          add: 'block',
          studentId: null,
          firstName: '',
          lastName: ''
        };
      }

  handleFirstNameChange = (e) => {
    this.setState({firstName: e.target.value});
    console.info(this.state.firstName)
 }

 handleLastNameChange = (e) => {
    this.setState({lastName: e.target.value});
 }

  editStudent = id => {
    const requestOptions = {
      method: 'PATCH',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({firstName: this.state.firstName , lastName: this.state.lastName}),
    };
    console.info(id)
    fetch("/class/update/" + id, requestOptions)
    .then((response) => {
        console.info('this is response')
      return response.json();
    })
    .catch((err) => {
        console.info(err)
    })
  }

render() {
        if (!this.state.students) return null;
        const studentNames = this.state.students.map(student => <Draggable bounds = "parent" key = {student.id}><div className = "handle"><img onClick = {() => this.getStudent(student.id)} className = "imgLogo" src = {user} alt = "user-logo"/><div></div> {student.firstName}<div></div> {student.lastName}<div></div> <div><div></div><img onClick = {() => this.showForm(student.id)} className = "imgBox" src = {edit} alt = "edit-logo"/><img onClick = {() => this.deleteStudent(student.id)} className = "imgBox" src = {trash} alt = "delete-logo"/></div></div></Draggable>);
        return (


            <div className = "float-container">
                
              <divclassName = "container float-child">{studentNames}
              
              </div>
              
              <div className = "float-child">
              <div><h4>Teacher:</h4><div></div><p>FIRSTNAME LASTNAME</p></div>
              <h3>Student Info</h3>

              <div id = "editForma">
                <form>
                  <label >First Name:</label>
                    <input type = "text" name = "firstName" value = {this.state.firstName} onChange = {this.handleFirstNameChange} />
                    <div></div>
                  <br></br>
                    <label >Last Name:</label>
                    <input type = "text" name = "lastName" value = {this.state.lastName} onChange = {this.handleLastNameChange}/>
                    
                    <button className = "button button2" type = "submit" onClick = {() => this.editStudent(this.state.studentId)}>Edit Student</button>
                </form>

                
                </div>

              </div>
            </div>

        );
      }
    }

export default App;

Теперь, когда я выбрал студента, которого хочу отредактировать, я редактирую имя и фамилию на «Кейт» и «смит», в конце процесса запроса моя страница переходит на http://localhost:8080/?firstName=Kate&lastName=Smith, что является частью, которую я не понимаю. .

Теперь, когда он переходит туда, даже когда я обновляю страницу и возвращаюсь к http://localhost:8080/, он «зависает».

Что касается ошибок, я не получаю их в 95% случаев, только один раз я получил ошибку:

this is body { firstName: 'Kate', lastName: 'Smith' }
[1] MongoServerError: not primary
[1]     at MessageStream.messageHandler (/Users/milospopovic/Desktop/Code/teacher-solo/node_modules/mongodb/lib/cmap/connection.js:462:30)
[1]     at MessageStream.emit (node:events:390:28)
[1]     at processIncomingData (/Users/milospopovic/Desktop/Code/teacher-solo/node_modules/mongodb/lib/cmap/message_stream.js:108:16)
[1]     at MessageStream._write (/Users/milospopovic/Desktop/Code/teacher-solo/node_modules/mongodb/lib/cmap/message_stream.js:28:9)
[1]     at writeOrBuffer (node:internal/streams/writable:390:12)
[1]     at _write (node:internal/streams/writable:331:10)
[1]     at MessageStream.Writable.write (node:internal/streams/writable:335:10)
[1]     at TLSSocket.ondata (node:internal/streams/readable:777:22)
[1]     at TLSSocket.emit (node:events:390:28)
[1]     at addChunk (node:internal/streams/readable:324:12) {
[1]   topologyVersion: { processId: new ObjectId("6226493d3f6cbc2e7ec62cd9"), counter: 54 },
[1]   ok: 0,
[1]   code: 10107,
[1]   codeName: 'NotWritablePrimary',
[1]   '$clusterTime': {
[1]     clusterTime: new Timestamp({ t: 1647717344, i: 2 }),
[1]     signature: {
[1]       hash: new Binary(Buffer.from("c1c7efa296c48125954f75a0da484b63fd9a69de", "hex"), 0),
[1]       keyId: new Long("7030875868872310785")
[1]     }
[1]   },
[1]   operationTime: new Timestamp({ t: 1647717343, i: 1 }),
[1]   [Symbol(errorLabels)]: Set(1) { 'RetryableWriteError' }
[1] }