如何制作材料ui侧边栏打开主要内容做出反应？

Question

我是新手做出反应并正在开发一个应用程序，

背景

它有管理员，教师，学生，仪表板。一个静态登陆页面，按钮可以转到/ 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（它没有接收道具）
• 我正在使用私人和公共路线。

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

提前致谢。

Answer 1

如果我在routes.js中使用路由，侧边栏不会打开主容器内的内容，而是在新选项卡中打开。

在LeftDrawer内部，您将呈现内容链接。你应该使用react-router-dom Link elements。

像这样：

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

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

如果我在AdminDash.js中使用路由，补充工具栏不会打开内容。

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

例：

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更改为组件的名称。