Как сделать материал UI боковой панели, чтобы открыть основной контент в реакции?

Question

Я новичок в реагировании и в настоящее время разрабатываю приложение,

ПРЕДПОСЫЛКА

У него есть администратор, преподаватель, студент, dashboards.amd, статическая целевая страница скнопки для перехода в / admin / login, / faculty / login, / student / login.который открывает соответствующие панели мониторинга [! [После входа администратора он получает эту страницу панели мониторинга] [1]] [1]

ПРОБЛЕМА:

Приложение.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Routes from "./routes";
import firebase from "./Firebase";

const App = props => {
  return (
    <BrowserRouter>
      <Routes {...props} />
    </BrowserRouter>
  );
};

firebase.auth().onAuthStateChanged(user => {
  ReactDOM.render(<App user={user} />, document.getElementById("root"));
});

Routes.js

import React from "react";
import { Switch, Route, BrowserRouter } from "react-router-dom";
import MainLayout from "./OtherComponents/Common/MainLayout";
//Home
import Home from "./MainComponents/Home";
import HomePublicRoute from "./OtherComponents/Routes/Home/HomePublicRoute";
//ADMIN
//components
import AdminLogin from "./OtherComponents/Login/Admin";

import AdminDash from "./MainComponents/Admin";
import AdminPublicRoute from "./OtherComponents/Routes/Admin/AdminPublicRoutes";
import AdminPrivateRoute fro"./OtherComponents/Routes/Admin/AdminPrivateRoutes";
//pages
import PageDashboard from "./MainComponents/Admin/pages/dashboard";
import AdminTaluka from "./MainComponents/Admin/pages/taluka";


const Routes = props => {
  console.log(props);

  return (
    <MainLayout>
      <Switch>
        <AdminPublicRoute
          {...props}
          exact
          restricted={true}
          path="/admin/login"
          component={AdminLogin}
        />
        <AdminPrivateRoute
          {...props}
          path="/admin/admindashboard"
          exact
          component={AdminDash}
        />


       <AdminPrivateRoute
              {...props}
              path="/admin/pagedashboard"
              exact
              component={PageDashboard}
            />



        <AdminPrivateRoute
          {...props}
          path="/admin/taluka"
          exact
          component={AdminTaluka}
        />

        <HomePublicRoute path="/" component={Home} />
      </Switch>
    </MainLayout>
  );
};
export default Routes;

MainLayout.js

import React from "react";
//var reactRouterToArray = require("react-router-to-array");
const MainLayout = props => {
  //console.log(reactRouterToArray(props.children));
  return <div>{props.children}</div>;
};
export default MainLayout;

• Боковая панель не открывает содержимое внутри основного контейнера, вместо этого она открывается в новой вкладке, если я использую route внутри rout.js.

• Боковая панель не открывает содержимое, если я использую маршрут внутри AdminDash.js.

• Я попытался передать маршруты с помощью props (props.children) в AdminDash (его нетполучение реквизита)

• Я использую частные и общественные маршруты.

Я запутался и не знаю, где я иду не таклюбые предложения или подсказки будут полезны.

Заранее спасибо.

Answer 1

Боковая панель не открывает содержимое внутри основного контейнера, вместо этого она открывается в новой вкладке, если я использую route внутри rout.js.

Внутри LeftDrawer вы отображаете ссылкик содержанию.Вы должны использовать react-router-dom Элементы ссылок .

Примерно так:

import { Link } from 'react-router-dom'

<Link to="/about">About</Link>

Боковая панель не открывает содержимое, если я использую маршрут внутри AdminDash.js.

Маршруты не должны определяться несколько раз.Вы определили /admin/pagedashboard как в AdminDash.js, так и в Routes.js.Если вы хотите иметь общую оболочку вокруг содержимого, определите маршруты внутри компонента оболочки и удалите точный маршрут из родительских маршрутов.

Пример:

MainLayout
.Routes
../admin
...AdminDash (Shell for multiple pages, admin layout)
..../admindashboard
.....AdminDasboard
..../pagedashboard
.....PageDashboard 

Я попыталсяпрохождение маршрутов с помощью реквизита (props.children) в AdminDash (он не получает реквизит)

Вы должны просто импортировать их при необходимости.

РЕДАКТИРОВАТЬ:

Удалите точное из Routes.js <Route path='/admin' component={AdminDash} /> и в AdminDash попробуйте

const AdminDash = ({ match }) => (
  <div>
    <Route path={${match.url}/admindashboard} component={AdminContent}/>
    <Route path={${match.url}/pagedashboard} component={PageContent}/>
  </div>
); 

В приведенном выше примере обратите внимание, чтобы изменить AdminContent и PageContent с именами ваших компонентов.