Как визуализировать страницу на основе выбранной опции в средней части приложения, верхняя и боковая панели должны быть статичными

Question

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

Я пробовал метод разделения, например, как я использовал JSP раньше, но он не очень эффективен, так сказать

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Login from './Login';
import * as serviceWorker from './serviceWorker';
import Dropdown from 'react-bootstrap/Dropdown';
import { Link } from 'react-router-dom';
import { BrowserRouter, Route } from "react-router-dom";
import './index.css';
import AssetView from './AssetView';
import DepartmentView from './DepartmentView';
import LocationView from './LocationView';
import EmployeeView from './EmployeeView';
import AddDepartment from './AddDepartment';
import AddLocation from './AddLocation';

const routing = (
    <BrowserRouter>
      <div>
      <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0">
  <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
  <ul class="navbar-nav px-3">
  <li class="nav-item dropdown">
  <Dropdown>
      <Dropdown.Toggle variant="success" id="dropdown-basic">
        Account
      </Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Item href="#/action-1">Informations</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Settings</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Signout</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
      </li>
  </ul>
</nav>

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
      <div class="sidebar-sticky">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-Link active" href="#">
              <span data-feather="home"></span>
              Dashboard <span className="sr-only">(current)</span>
                    </a>
                  </li>

                  <h6 className="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                  <span>Assets Management</span>
                  <a className="d-flex align-items-center text-muted" href="#">
                    <span data-feather="plus-circle" />
                  </a>
                </h6>
                <li className="nav-item">
                      <Link to="/AssetView">
                      <a class="nav-link" href="#">
              <span data-feather="file"></span>
                      View All Assets
                      </a>
                      </Link>
                  </li>

                </ul>

                <h6 className="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                  <span>Company Management</span>
                  <a className="d-flex align-items-center text-muted" href="#">
                    <span data-feather="plus-circle" />
                  </a>
                </h6>
                <ul className="nav flex-column mb-2">
                  <li className="nav-item">
                      <Link to="/DepartmentView">
                      <a class="nav-link" href="#">
              <span data-feather="file"></span>
                      View All Departments
                      </a>
                      </Link>
                  </li>
                  <li className="nav-item">
                      <Link to="/AddDepartment">
                      <a class="nav-link" href="#">
              <span data-feather="file"></span>
                      Add New Department
                      </a>
                      </Link>
                  </li>
                  <li className="nav-item">
                      <Link to="/LocationView">
                      <a class="nav-link" href="#">
              <span data-feather="file"></span>
                      View All Locations
                      </a>
                      </Link>
                  </li>
                  <li className="nav-item">
                  <Link to="/AddLocation">
                  <a class="nav-link" href="#">
              <span data-feather="file"></span>
                      Add New Location
                      </a>
                      </Link>
                  </li>
        </ul>

                <h6 className="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                  <span>Employees Management</span>
                  <a className="d-flex align-items-center text-muted" href="#">
                    <span data-feather="plus-circle" />
                  </a>
                </h6>
                <ul className="nav flex-column mb-2">
                  <li className="nav-item">
                      <Link to="/EmployeeView">
                      <a class="nav-link" href="#">
              <span data-feather="file"></span>
                      View All Employees
                      </a>
                      </Link>
                  </li>

        </ul>
      </div>
    </nav>
  </div>
</div>
      <Route exact path="/AssetView" component={AssetView} />
        <Route path="/DepartmentView" component={DepartmentView} />
        <Route path="/LocationView" component={LocationView} />
        <Route path="/EmployeeView" component={EmployeeView} />
        <Route path="/AddDepartment" component={AddDepartment} />
        <Route path="/AddLocation" component={AddLocation} />

      </div>
    </BrowserRouter>
  )

  ReactDOM.render(routing, document.getElementById('root'));

serviceWorker.unregister();

Вот так выглядит страница прямо сейчас, я действительно хочу, чтобы содержимое страницы отображалось посередине

https://photos.app.goo.gl/BSuZuvGhiQQetmit5

Answer 1

На правильный ответ ответил @ ravibagul91, спасибо.

Я удалил class="sidebar-sticky" боковой панели и добавил .sidebar{position:absolute;top:0;bottom:0} в мой index.css, и он отлично работает как изображениеЯ только что загрузил

https://photos.app.goo.gl/m744U7R4mACAUXq37

Спасибо @ piyush-dhamecha за рекомендацию, она в некоторой степени похожа на то, что мне нужно, но, по правде говоря, это все еще своего рода аванс для меня, ноЯ ценю это и сохраню для дальнейшего использования.

Answer 2

Вы имеете в виду, вам нужно создать приложение, похожее на панель управления Если верхняя и боковая панели статичны, а при щелчке боковой панели изменяется средняя часть

Тогда вы можете проверить этот репо https://github.com/designrevision/shards-dashboard-react

Вот главная страница https://github.com/DesignRevision/shards-dashboard-react/blob/master/src/layouts/Default.js

import React from "react";
import PropTypes from "prop-types";
import { Container, Row, Col } from "shards-react";

import MainNavbar from "../components/layout/MainNavbar/MainNavbar";
import MainSidebar from "../components/layout/MainSidebar/MainSidebar";
import MainFooter from "../components/layout/MainFooter";

const DefaultLayout = ({ children, noNavbar, noFooter }) => (
  <Container fluid>
    <Row>
      <MainSidebar />
      <Col
        className="main-content p-0"
        lg={{ size: 10, offset: 2 }}
        md={{ size: 9, offset: 3 }}
        sm="12"
        tag="main"
      >
        {!noNavbar && <MainNavbar />}
        {children}
        {!noFooter && <MainFooter />}
      </Col>
    </Row>
  </Container>
);

DefaultLayout.propTypes = {
  /**
   * Whether to display the navbar, or not.
   */
  noNavbar: PropTypes.bool,
  /**
   * Whether to display the footer, or not.
   */
  noFooter: PropTypes.bool
};

DefaultLayout.defaultProps = {
  noNavbar: false,
  noFooter: false
};

export default DefaultLayout;