我正在使用React on Rails创建一个社交媒体项目，我有一个导航栏组件来处理每个链接的路由，有一个名为Ventbox的链接，它类似于Twitter的Tweetbox，我如何更改代码，以便用户不进入一个端点为“/vent”的新页面，Ventbox将在用户位于页面上的任何位置弹出，是否仍使用终结点“/vent”？
这是目前为止我的导航栏组件：

import React from 'react'
import { NavLink } from "react-router-dom"
import { navData } from "./navData.js";
import styles from "./styles/navbar.module.css"
import { useState } from "react";
import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
import Ventbox from './Ventbox'
import CreateIcon from '@mui/icons-material/Create';

export default function NavBar() {

  const [open, setopen] = useState(false)
  
  

    const toggleOpen = () => {
        setopen(!open)
    }
  

    return (
      
      <div className={open?styles.sidenav:styles.sidenavClosed}>
          <button className={styles.menuBtn} onClick={toggleOpen}>
              {open? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />}
              </button>
          {navData.map(item =>{
            return <NavLink key={item.id} className={styles.sideitem} to={item.link}>
              {item.icon}
              <span className={styles.linkText}>{item.text}</span>
          </NavLink>
          })}
              <NavLink key={'ventbox'} className={styles.sideitem} to="/vent">
                <CreateIcon />
                <Ventbox to="/vent" style={styles.linkText} />
              </NavLink>
      </div>
    )
  }

这是我的通风箱组件：

import React, { useState } from "react";
import './styles/Ventbox.css'
import {useNavigate} from 'react-router-dom'

function Ventbox({style}) {
    
    const [popup,setPop] = useState(false);
    const [content, setContent] = useState("");
    const [textLimit, setTextLimit] = useState(250);
    

    const handleClickOpen = () => {
        setPop(!popup);
    }

    const closePopup = () => {
        setPop(false);
    }

    const handleChange = e => {
        setContent(e.target.value);
        setTextLimit(250 - e.target.value.length);
    }

    const handleSubmit = async e => {
        e.preventDefault();
        if (content.length > 250) {
            alert("Text limit reached");
        } else {
            try {
                const response = await fetch(`/posts`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ content: content })
                });
                const data = await response.json();
                console.log(data);
                
            } catch (error) {
                console.error(error);
            }
        }
    }

    return(
        <div>
            <span onClick={handleClickOpen} className={style}>Vent</span>
            <div>
                {
                    popup?
                    <div className="main">
                        <div className="popup">
                            <div className="popup-header">
                                <h1>What's on your mind?</h1>
                                <button className="delete-button" onClick={closePopup}>X</button>
                            </div>
                            <div>
                                <form onSubmit={handleSubmit}>
                                    <input className="textbox" placeholder="Enter text here" 
                                        value={content} 
                                        onChange={handleChange} 
                                        maxLength={250} 
                                    />
                                    <p>Characters remaining: {textLimit}</p>
                                    <button className="post-button"type="submit">Post</button>
                                </form>
                            </div>
                        </div>
                    </div>:""
                }
            </div>
        </div>
    )
}
export default Ventbox;

这是我的navData组件，我从材质ui中获取了图标和路线：

import HomeIcon from '@mui/icons-material/Home';
import InfoIcon from '@mui/icons-material/Info';
import MenuBookIcon from '@mui/icons-material/MenuBook'; 
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import HowToRegIcon from '@mui/icons-material/HowToReg';
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';

import SendIcon from '@mui/icons-material/Send';
import NotificationsIcon from '@mui/icons-material/Notifications';
import CreateIcon from '@mui/icons-material/Create';
import Ventbox from './Ventbox'
import Popup from 'reactjs-popup'
import {useState} from 'react'

export const navData = [
    
    {
        id: 0,
        icon: <HomeIcon/>,
        text: "Home",
        link: "/"
    },
    {
        id: 1,
        icon: <AccountCircleIcon/>,
        text: "Profile",
        link: "/profile"
    },
    {
        id: 2,
        icon: <SendIcon/>,
        text: "Messages",
        link: "/messages"
    },
    {
        id: 3,
        icon: <NotificationsIcon/>,
        text: "Notifications",
        link: "/notifications"
    },

    {
        id: 5,
        icon: <HowToRegIcon/>,
        text: "Signup/Login",
        link: "/signin"
    },
]

任何帮助都非常感谢！！
我什么都试过了，但完全卡住了