如何用react-router-dom实现二级路由？

Question

容器组件
<Layout>
                    <Sider>
                        <Menu 
                            onClick={this.handleMenuClick}
                            defaultSelectedKeys={['1']}
                        >
                            <Menu.Item key="1">
                                <Link to={{
                                    pathname: "/machine/general",
                                }}>概况</Link>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Link>流量</Link>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Link>库存</Link>
                            </Menu.Item>
                            <Menu.Item key="4">
                                <Link>维护</Link>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Content>
                        <Switch>
                            {
                                machineRoute.map((item, index) => {
                                    return (
                                        <AuthRoute {...item} key={index} />
                                    )
                                })
                            }
                        </Switch>
                    </Content>
                </Layout>

AuthRoute是一个控制权限的路由 其实就是返回Route组件
具体如下：

render() {
        if (this.passOrNot()) {
            return (
                <Route component={this.props.component} path={this.props.path} {...this.props}></Route>
            )
        } else {
            return (
                <Switch>
                    <Route component={rootRoute[0].component}></Route>
                </Switch>

            )
        }
    }

machineRoute是配置路由信息的数组:

const route = [
    {
        path: '/machine/genaral',
        component: general,
        exact: true,
        strict: true,
        sensitive: true,
        role: 10,
    },
    {
        path: '/machine/maintain',
        component: maintain,
        exact: true,
        strict: true,
        sensitive: true,
        role: 10,
    },
    {
        path: '/machine/flow',
        component: flow,
        exact: true,
        strict: true,
        sensitive: true,
        role: 10,
    },
    {
        path: '/machine/stock',
        component: stock,
        exact: true,
        strict: true,
        sensitive: true,
        role: 10,
    }
]

export default route;

页面左边是菜单，右边是内容
在这个页面的外面还有一层BrowserRouter包着

在点击菜单以后，现在会重新打开一个新页面
而不是在Content下的一个子页面

如何解决？

Answer 1