如何让 material ui 侧边栏打开反应中的主要内容？

Question

我是反应新手，目前正在开发应用程序，

背景

它有管理员、教职工、学生，dashboards.amd 一个带有按钮的静态登录页面，可以转到 /admin/login、/faculty/login、/student/login。这会打开相应的仪表板 [![管理员登录后，他会获得此仪表板页面][1]][1]

问题：

App.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;

如果我在 routes.js 中使用路由，侧边栏不会打开主容器内的内容，而是在新选项卡中打开。
如果我在 AdminDash.js 中使用路由，侧边栏不会打开内容。
我已经尝试使用道具 (props.children) 将路由传递给 AdminDash（它没有收到道具）
我正在使用私有和 public 路由。

我很困惑，我不知道我哪里出错了，任何建议或提示都会有所帮助。

提前致谢。

Answer 1

Sidebar doesn't open the content inside the main container instead it opens in a new tab if i use route inside routes.js .

在 LeftDrawer 中，您正在呈现指向内容的链接。你应该使用 react-router-dom Link elements.

像这样：

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

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

Sidebar doesn't open the content if i use route inside AdminDash.js .

不应多次定义路由。您在 AdminDash.js 和 Routes.js 中都定义了 /admin/pagedashboard。如果你想在内容周围共享 shell，请在 shell 组件内定义路由，并从父路由中删除精确路由。

示例：

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

i have tried passing the routes using props (props.children) to AdminDash( its not receivng the prop)

您应该只在需要时导入它们。

编辑：

从 Routes.js <Route path='/admin' component={AdminDash} /> 中删除 exact 并在 AdminDash 中尝试

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

在上面的示例中，请注意将 AdminContent 和 PageContent 更改为您的组件名称。

如何让 material ui 侧边栏打开反应中的主要内容？

How to make material ui sidebar to open the main content in react?

javascript

sidebar

reactjs

react-router