如何让素材ui侧边栏在react中打开主要内容？

Question

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

背景

它有 admin、faculty、student、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（它没有收到道具）

• 我正在使用私有和公共路由。

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

提前致谢。

Answer 1

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

在LeftDrawer 中，您正在呈现内容的链接。你应该使用react-router-domLink elements。

像这样：

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

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

如果我在 AdminDash.js 中使用路由，侧边栏不会打开内容。

不应多次定义路由。您已经在 AdminDash.js 和 Routes.js 中定义了/admin/pagedashboard。如果你想在内容周围有一个共享的外壳，请在外壳组件内定义路由并从父路由中删除确切的路由。

例子：

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