项目出现在当前页面内容下方，希望它浮动 window

Question

我正在使用 React。我有 2 class 个组件：

我的页面
NewComponent（路径：/api/pages/components/new）

这是我的新组件 class:

import React from 'react';
import { Modal } from 'react-bootstrap';


class NewComponent extends React.Component{

    constructor(props){
        super(props);
    }
    

    render(){
        return(
              <Modal.Dialog>
                    <Modal.Header>
                        <Modal.Title>New Component</Modal.Title>
                         </Modal.Header>
                </Modal.Dialog>

        );
    }
}

export default NewComponent;

这是我的主页 class:

import React from 'react';
import { BrowserRouter as Router, NavLink, Route} from 'react-router-dom';
import { Button } from 'react-bootstrap';


class MyPage extends React.Component{

    constructor(props){
        super(props);
    }
    

    render(){
        return(
        
            {/**   some code .... */}
            
              <div className="d-block mb-4 mb-md-0">
                <Router>

                    <NavLink to={Routes.NewComponentForm.path}>
                        <Button id="addComponent" className="btn btn-dark rounded-circle btn-lg" >+</Button>
                         <Route path="/api/pages/components/new" component={NewComponentForm}/>
                    </NavLink>
                </Router>
               </div>
        );
    }
    
}

export default MyPage;

我的问题：

NewComponent class 的项目在同一页面上呈现在 MyPage class 的项目下方。

我想要的是让 Modal 组件 (NewComponent class) 成为浮动的 window。

Answer 1

我的第一个想法是你没有 imported the the stylesheet 从 react-bootstrap 进入你的项目。

但这实际上是您 react-router-dom 设置的问题。

您希望在应用的最外层有一个 Router 组件。您可以在同一个 Router 中包含多个 Route 块。除非你正在使用嵌套路由做一些复杂的事情，否则你可能只有一组 Route 组件，它们位于 App.

中的 Switch 语句中

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path={Routes.NewComponentForm.path} component={NewComponentForm} />
        <Route component={MyPage} />
      </Switch>
    </Router>
  );
}

在MyPage

return(
  {/**   some code .... */}
  <div className="d-block mb-4 mb-md-0">
    <NavLink to={Routes.NewComponentForm.path}>
      <Button id="addComponent" className="btn btn-dark rounded-circle btn-lg" >+</Button>
    </NavLink>
  </div>
);

我对 NewComponent 和 NewComponentForm 之间的关系感到困惑。在这里，我假设带有表单的路由呈现模态。

项目出现在当前页面内容下方，希望它浮动 window

Item appearing below current page content, want it to be floating window

javascript

reactjs

react-bootstrap

react-router