如何在 react 和 bootstrap 上将模式重定向到 url？答案

【问题标题】：How to make a modal redirect to a url on react and bootstrap?如何在 react 和 bootstrap 上将模式重定向到 url？
【发布时间】：2020-10-28 05:11:50
【问题描述】：

我制作了一个按钮，该按钮触发了 React 组件上的模态。

  //REACT COMPONENT
    
    import React from 'react';
import { Link, withRouter } from 'react-router-dom';
    
    const BottomNavBar = ()=>{
    
    return (
            //NAVABAR
            <div style={{ marginTop: '100px' }}>
                {/* MODAL */}
                <div
                    className='modal fade'
                    id='exampleModalCenter'
                    tabindex='-1'
                    role='dialog'
                    aria-labelledby='exampleModalCenterTitle'
                    aria-hidden='true'
                >
                    <div
                        className='modal-dialog modal-dialog-centered'
                        role='document'
                    >
                        <div className='modal-content'>
                            <div className='modal-header'>
                                <h5
                                    className='modal-title'
                                    id='exampleModalLongTitle'
                                >
                                    CREAR
                                </h5>
                                <button
                                    type='button'
                                    className='close'
                                    data-dismiss='modal'
                                    aria-label='Close'
                                >
                                    <span aria-hidden='true'>&times;</span>
                                </button>
                            </div>
                            <div className='modal-body text-center'>
                                <Link
                                    to='/patient/create'
                                    className='btn btn-primary'
                                >
                                    CREAR USUARIO
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
                {/* MODAL */}
    
                <nav className='navbar navbar-expand-lg navbar-dark fixed-bottom bg-primary'>
                    <div className='container navbar-nav'>
                        {/* Right Icon Set */}
                        <div className='row  ml-auto mr-auto '>
                            <div className='nav-item col active'>
                                <Link
                                    className='nav-link'
                                    data-toggle='modal'
                                    data-target='#exampleModalCenter'
                                >
                                    <i className='far fa-plus-square fa-2x'></i>
                                </Link>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        );
    
    }
    
    
    export default withRouter(BottomNavBar);

一切正常，当我点击“LINK”时，组件会重定向到我的项目页面。

但是模态仍然处于活动状态！在另一页。

我认为是因为我从不“调用”“data-dismiss”属性。

但是我该怎么做呢？我试图将属性放在“LINK”上，但它不起作用，它只是关闭，但没有重定向。

我如何执行该操作...打开一个模态并重定向到一个页面（并关闭该模态）。

【问题讨论】：

您可以将onClick 处理程序附加到Link 以调用模态的onClose 处理程序。如果您可以提供Minimal, Complete, and Reproducible 代码示例，我们可以提供更好的帮助。从包含的 sn-p 中，根本看不到模态是如何呈现的。
谢谢！我只是编辑组件的代码来为您提供更多信息。
因此，模态似乎只是您的导航栏的一部分。是否有任何状态可以控制模式或导航栏何时可见和/或已安装？你基本上是一个不需要任何道具并呈现静态 JSX 的组件。
从'react'导入反应，{片段}；从'./NavBar'导入导航栏；从'./BottomNavBar'导入BottomNavBar； const Layout = ({ children }) => { //Main Return return (
{children}
); };导出默认布局；
而Layout在APP.js中只有这个

标签： reactjs bootstrap-4 bootstrap-modal

【解决方案1】：

我没有对此进行测试，但它应该对你有用：

import React, { useEffect } from "react";
import { Link, withRouter } from "react-router-dom";

const BottomNavBar = () => {
  useEffect(() => {
    return () => $("#exampleModalCenter").modal("hide");
  });
  return (
    <div style={{ marginTop: "100px" }}>
      {/* MODAL */}
      <div
        className="modal fade"
        id="exampleModalCenter"
        tabindex="-1"
        role="dialog"
        aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true"
      >
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLongTitle">
                CREAR
              </h5>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body text-center">
              <Link to="/patient/create" className="btn btn-primary">
                CREAR USUARIO
              </Link>
            </div>
          </div>
        </div>
      </div>
      {/* MODAL */}

      <nav className="navbar navbar-expand-lg navbar-dark fixed-bottom bg-primary">
        <div className="container navbar-nav">
          {/* Right Icon Set */}
          <div className="row  ml-auto mr-auto ">
            <div className="nav-item col active">
              <Link
                className="nav-link"
                data-toggle="modal"
                data-target="#exampleModalCenter"
              >
                <i className="far fa-plus-square fa-2x"></i>
              </Link>
            </div>
          </div>
        </div>
      </nav>
    </div>
  );
};

export default withRouter(BottomNavBar);

如果你正在使用 react，你可以尝试使用 react-bootstrap。

【讨论】：