Question

你好，我是新手，我正在尝试从父组件（MainLayout.js）到子组件（AdminDash.js）的 路由路径列表 ，但是我无法在子组件（AdminDash.js）中接收到它，我尝试使用react路由器阵列，但是如果没有来自父组件的路由数据，它将不起作用“ props.children”具有所有路由“ path”。

这是父组件（MainLayout .js），它从其父route.js中删除了“ this.children”

const MainLayout = props => { return <div>{props.children}</div>; }; 
export default MainLayout;

当我在MainLayout中使用react-router-to-array时，我得到以下信息

 var reactRouterToArray = require("react-router-to-array"); 
 console.log( reactRouterToArray(props.children)); 
I GET THIS AS RESULT :(4) ["/admin/login", "/admin/admindashboard", "/admin/pagedashboard", "/"]

这是子组件（AdminDash.js）

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import { withStyles } from "@material-ui/core/styles";
import MainLayout from "../../OtherComponents/Common/MainLayout";
import Header from "./AdminHeader";
import LeftDrawer from "./AdminLeftDrawer";
import Data from "./admindata";
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
import defaultTheme, { customTheme } from "./admintheme";

const styles = () => ({
  container: {
    margin: "80px 20px 20px 15px",
    paddingLeft: defaultTheme.drawer.width,
    [defaultTheme.breakpoints.down("sm")]: {
      paddingLeft: 0
    }
    // width: `calc(100% - ${defaultTheme.drawer.width}px)`
  },
  containerFull: {
    paddingLeft: defaultTheme.drawer.miniWidth,
    [defaultTheme.breakpoints.down("sm")]: {
      paddingLeft: 0
    }
  },
  settingBtn: {
    top: 80,
    backgroundColor: "rgba(0, 0, 0, 0.3)",
    color: "white",
    width: 48,
    right: 0,
    height: 48,
    opacity: 0.9,
    padding: 0,
    zIndex: 999,
    position: "fixed",
    minWidth: 48,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0
  }
});

class AdminDash extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);
    //  console.log(window.topicText);
    // nav bar default open in desktop screen, and default closed in mobile screen
    this.state = {
      theme: defaultTheme,
      rightDrawerOpen: false,
      navDrawerOpen:
        window &&
        window.innerWidth &&
        window.innerWidth >= defaultTheme.breakpoints.values.md
          ? true
          : false
    };

    this.handleChangeNavDrawer = this.handleChangeNavDrawer.bind(this);
    this.handleChangeTheme = this.handleChangeTheme.bind(this);
  }

  handleChangeNavDrawer() {
    this.setState({
      navDrawerOpen: !this.state.navDrawerOpen
    });
  }

  handleChangeTheme(colorOption) {
    const theme = customTheme({
      palette: colorOption
    });
    this.setState({
      theme
    });
  }

  render() {
    // console.log(this.props, "sdesd");
    const { classes } = this.props;
    const { navDrawerOpen, theme } = this.state;
    return (
      <MuiThemeProvider theme={theme}>
        <MainLayout>
          <Header
            handleChangeNavDrawer={this.handleChangeNavDrawer}
            navDrawerOpen={navDrawerOpen}
          />{" "}
          <LeftDrawer
            navDrawerOpen={navDrawerOpen}
            handleChangeNavDrawer={this.handleChangeNavDrawer}
            menus={Data.menus}
          />{" "}
          <div
            className={classNames(
              classes.container,
              !navDrawerOpen && classes.containerFull
            )}
          >
            hello
            {this.props.children ? "true" : "false"}
          </div>
        </MainLayout>
      </MuiThemeProvider>
    );
  }
}

 AdminDash.propTypes = {
   children: PropTypes.element,
  classes: PropTypes.object
 };

export default withStyles(styles)(AdminDash);

更清楚地说，我想在AdminDash中接收所有路线的路径列表，任何建议，提示都会有所帮助，请提前感谢

Answer 1

您可以使用React-router的HOC来获取所有路径。

import { withRouter } from 'react-router';
const allPaths = this.props.routes[0].childRoutes.map(x => x.path);
export default withRouter(AdminDash);

这是通过包装withRouter HOC来获得React-Router的所有功能的基本思想，而不是沿层级传递道具。

如何将路由列表传递给子组件

1 个答案: