我的路由无法使用Usenavigate工作。我该如何解决这个问题

Question

嘿，有人可以解释我的代码中有什么问题。我正在尝试路由路径，并使用Usenavigate链接它。但是它不起作用，URL发生了变化，但输出与众不同。 中显示我的代码

app.js。

import React from 'react'
import { Routes, Route } from 'react-router-dom'
import Apps from './Apps'
import Lists from './Lists'


function App() {
  return (
   <div className='App'>
    <Routes>
      <Route path='/' element={<Apps/>}/>
      <Route path='/lists' element={<Lists/>}/>
    </Routes>
    </div>
  )
}

export default App

将在此文件

import React, { useState } from "react";
import "./App.css";
import Form1 from "./form1";
import Form2 from "./form2";
import { Box, Paper, Button } from "@mui/material";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import { useNavigate } from "react-router-dom";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";

function Apps() {
  const [formData, setFormData] = useState({
    name: "",
    gender: "",
    address: "",
    hobby: "",
    email: "",
  });

  let arr = [];

  const handleOnChange = () => {
    arr = [formData];
    console.log("arr", arr);
  };

  let navigate = useNavigate();

  return (
    <>
      <React.Fragment>
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            "& > :not(style)": {
              m: "auto",
              width: 250,
              height: 485,
              marginTop: "50px",
            },
          }}
        >
          <Paper elevation={20}>
            <div className="App">
              <AccountCircleIcon
                fontSize="large"
                style={{ color: "#1976D2", marginTop: "10px" }}
              />
              <h1
                style={{
                  color: "#1976D2",
                  marginTop: "10px",
                  marginBottom: "10px",
                }}
              >
                Form Data
              </h1>
              <Button onClick={() => navigate("/lists")} variant="contained">
                <ArrowForwardIcon />
                List
              </Button>

              <Form1 formData={formData} setFormData={setFormData} />

              {formData.gender === 2 && (
                <Form2 formData={formData} setFormData={setFormData} />
              )}
              <div style={{ marginTop: "10px" }}>
                <Button
                  variant="contained"
                  type="submit"
                  onClick={handleOnChange}
                >
                  Submit
                </Button>
              </div>
            </div>
          </Paper>
        </Box>
      </React.Fragment>
    </>
  );
}

export default Apps;

我

import React from 'react'

function Lists() {
  return (
    <div>Lists</div>
  )
}

export default Lists