React子路由跳转，显示空白

在使用React菜单组件，点击跳转不显示子路由，直接跳到空白页面
在子路由的上一级路由里，不能使用exact
会导致父级路由路径不匹配从而父子组件都显示不了
父级路由

  render() {
    return (
      <Router>
        <Switch>
          <Route path="/login" component={LoginRegister} />
          <Route path="/register" component={LoginRegister} />
          <Route path="/" component={Layouts} /> 
          {/* 这里不能加exact，会导致子路由匹配不到 */}
          {/*  */}
        </Switch>
      </Router>
    );
  }

子路由

    render() {
        return (
            <Content
                style={{ margin: '0 16px', overflow: 'initial', backgroundColor: "transparent" }}
                className="site-layout-background"
            >
                <Breadcrumb style={{
                    margin: '15px',
                    fontSize: "16px"
                }} >
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>List</Breadcrumb.Item>
                    <Breadcrumb.Item>图标</Breadcrumb.Item>
                </Breadcrumb>

                <Switch>
                    <Route path="/home" component={Homes} />
                    <Route path="/icon" component={Icon} />
                    {/*  */}
                    {/*  */}
                </Switch>
                {this.props.children}
            </Content>
        )
    }