Getting errors when changing route from specific Component

Question

I am having problem changing route in react from specific component to another. This is my routes. I do not have any problem switching between '/' to '/login' or vice-versa. But when active route is '/menu-management' clicking to Link causes error. Here is my routes.

    function Routes() {
    return (
        <Switch>
            <Route exact path='/menu-management' render={()=> <Layout toolbar={true} navbar={true} children={<MenuManagement/>}/>} />
            <Route exact path='/login' render={()=> <Layout toolbar={false} navbar={false} children={<Login />}/>} />
            <Route exact  path='/' render={()=> <Layout toolbar={true} navbar={true} children={<Definitions/>}/>}/>
        </Switch>
    );}

And here is Component that causes error


    import React from 'react';
    import PropTypes from 'prop-types';
    import SvgIcon from '@material-ui/core/SvgIcon';
    import {fade, makeStyles, withStyles} from '@material-ui/core/styles';
    import TreeView from '@material-ui/lab/TreeView';
    import TreeItem from '@material-ui/lab/TreeItem';
    import Collapse from '@material-ui/core/Collapse';
    import {useSpring, animated} from 'react-spring/web.cjs';
    import gql from "graphql-tag";
    import {useQuery} from "@apollo/react-hooks";
    import * as Actions from '../store/actions/index';
    import {useDispatch} from "react-redux";

    function MinusSquare(props) {
        return (
            <SvgIcon fontSize="inherit" style={{width: 14, height: 14}} {...props}>
                {/* tslint:disable-next-line: max-line-length */}
                <path
                    d="M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 11.023h-11.826q-.375 0-.669.281t-.294.682v0q0 .401.294 .682t.669.281h11.826q.375 0 .669-.281t.294-.682v0q0-.401-.294-.682t-.669-.281z"/>
            </SvgIcon>
        );
    }

    function PlusSquare(props) {
        return (
            <SvgIcon fontSize="inherit" style={{width: 14, height: 14}} {...props}>
                {/* tslint:disable-next-line: max-line-length */}
                <path
                    d="M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 12.977h-4.923v4.896q0 .401-.281.682t-.682.281v0q-.375 0-.669-.281t-.294-.682v-4.896h-4.923q-.401 0-.682-.294t-.281-.669v0q0-.401.281-.682t.682-.281h4.923v-4.896q0-.401.294-.682t.669-.281v0q.401 0 .682.281t.281.682v4.896h4.923q.401 0 .682.281t.281.682v0q0 .375-.281.669t-.682.294z"/>
            </SvgIcon>
        );
    }

    function CloseSquare(props) {
        return (
            <SvgIcon className="close" fontSize="inherit" style={{width: 14, height: 14}} {...props}>
                {/* tslint:disable-next-line: max-line-length */}
                <path
                    d="M17.485 17.512q-.281.281-.682.281t-.696-.268l-4.12-4.147-4.12 4.147q-.294.268-.696.268t-.682-.281-.281-.682.294-.669l4.12-4.147-4.12-4.147q-.294-.268-.294-.669t.281-.682.682-.281.696 .268l4.12 4.147 4.12-4.147q.294-.268.696-.268t.682.281 .281.669-.294.682l-4.12 4.147 4.12 4.147q.294.268 .294.669t-.281.682zM22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0z"/>
            </SvgIcon>
        );
    }

    function TransitionComponent(props) {
        const style = useSpring({
            from: {opacity: 0, transform: 'translate3d(20px,0,0)'},
            to: {opacity: props.in ? 1 : 0, transform: `translate3d(${props.in ? 0 : 20}px,0,0)`},
        });

        return (
            <animated.div style={style}>
                <Collapse {...props} />
            </animated.div>
        );
    }

    TransitionComponent.propTypes = {
        /**
         * Show the component; triggers the enter or exit states
         */
        in: PropTypes.bool,
    };

    const StyledTreeItem = withStyles((theme) => ({
        iconContainer: {
            '& .close': {
                opacity: 0.3,
            },
        },
        group: {
            marginLeft: 7,
            paddingLeft: 18,
            borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
        },
    }))((props) => <TreeItem {...props} TransitionComponent={TransitionComponent}/>);

    const useStyles = makeStyles({
        root: {
            height: 264,
            flexGrow: 1,
            maxWidth: 400,
        },
    });

    const GET_PRODUCT_GROUPS = gql`
    query getProductGroups($account:Int!){
      product_groups(group_account: $account, sort:1) {
        id
        product_group_main {
          id
          main_group_name
          account_group_name{
            except_g_data
          }
        }
        products {
          id
          product_name
          account_product_name{except_p_data}
          product_detail{
            detail_text
          }
          product_price{
            price_value
            price_takeaway
            price_eatin
          }
          account_product_price{
            except_c_value
            except_c_takeaway
            except_c_eatin
          }
        }
      }
    }`;

    export default function ControlledTreeView() {
        const account = sessionStorage.getItem('account');
        const classes = useStyles();
        const dispatch = useDispatch();
        const renderTree = (productGroups) => (
            Array.isArray(productGroups) ? productGroups.map((productGroup) => (
                <StyledTreeItem key={productGroup.id} nodeId={`${productGroup.id}`}
                                label={productGroup.product_group_main.main_group_name}>
                    {Array.isArray(productGroup.products) ? productGroup.products.map((product) => (
                        <StyledTreeItem key={product.id} nodeId={`${product.id}`} label={product.product_name}
                                        onClick={() => dispatch(Actions.setProductId(product.id))}/>
                    )) : null}
                </StyledTreeItem>
            )) : null

        );

        const {data, loading, error} = useQuery(GET_PRODUCT_GROUPS, {variables: {account: parseInt(account)}});
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error</p>;
        console.log(data);
        return (
            Array.isArray(data.product_groups) &&
            <TreeView
                className={classes.root}
                defaultExpanded={['1']}
                defaultCollapseIcon={<MinusSquare/>}
                defaultExpandIcon={<PlusSquare/>}
                defaultEndIcon={<CloseSquare/>}
            >
                {renderTree(data.product_groups)}
            </TreeView>
        );
    }

And errors are

TreeView.js:496 Uncaught RangeError: Maximum call stack size exceeded

The above error occurred in the <ForwardRef(TreeItem)> component:
in ForwardRef(TreeItem) (created by WithStyles(ForwardRef(TreeItem)))
in WithStyles(ForwardRef(TreeItem)) (at ControlledTreeView.js:75)
in Unknown (created by WithStyles(Component))
in WithStyles(Component) (at ControlledTreeView.js:123)
in ul (created by ForwardRef(TreeView))
in ForwardRef(TreeView) (created by WithStyles(ForwardRef(TreeView)))
in WithStyles(ForwardRef(TreeView)) (at ControlledTreeView.js:140)
in ControlledTreeView (at MenuManagement.js:19)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (at MenuManagement.js:18)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at MenuManagement.js:17)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at MenuManagement.js:15)
in MenuManagement (at routes.js:11)
in main (at Layout.js:47)
in div (at Layout.js:44)
in App (created by Context.Consumer)
in withRouter(App) (at routes.js:11)
in Route (at routes.js:13)
in Switch (at routes.js:10)
in Routes (at App.js:35)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:34)
in Provider (at App.js:33)
in Suspense (at App.js:32)
in App (at src/index.js:22)
in ApolloProvider (at src/index.js:21)
Consider adding an error boundary to your tree to customize error handling behavior.

minhazmiraz · Accepted Answer · 2021-03-27 17:19:13Z

1

Faced and solved this problem. Check whether any duplicate nodeId provided in TreeItem or not?

answered Mar 27, 2021 at 17:19

minhazmiraz

4524 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sakura Kinomoto Over a year ago

Please offer some knowledge on the answers. Give information of the error, and examples solving it.

Collectives™ on Stack Overflow

Getting errors when changing route from specific Component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related