在React.Component 子组件中使用Router 渲染不出来

#1

当我在无状态子组件中使用 可以正常的跳转；但是在 class Ap2 extends Component {} 中定义子路由时，不能跳转，当触发Link 的时候整个子组件变成空白，此时console也不报错，就是默默的空白。但是我需要使用state变量，请问各位大侠，我使用方法错在哪里？
在网上找了好久嵌套路由，例子都是在 无状态子组件中定义子路由。拜托了。
子组件代码：

class EcoMgr extends React.Component{
    state = {
        data: [],
    };

       zoneChange(val){
    this.setState({data:val});
    }
    componentDidMount() {
        this.fetch();
    }
       render() {
        var match = this.props.match;
        return (
            <Layout>
                <Row style={{padding:'5px'}}>
                    <Col span={1}></Col>
                    <Col span={5}>
                        <Zone zoneChange={this.zoneChange}/>
                    </Col>
                    <Col span={1}></Col>
                    <Col span={5}>
                        <Radio.Group >
                            <Radio.Button value="large"><Link to={`${match.url}`} >Large </Link></Radio.Button>
                            <Radio.Button value="default"><Link to={`${match.url}/ly2`} >Default</Link></Radio.Button>
                            <Radio.Button value="small"><Link to={`${match.url}/ly3`} >Small</Link></Radio.Button>
                        </Radio.Group>
                    </Col>
                </Row>

                <content>
                    <Switch>
                        <Route exact path={`${match.path}`} component={SocalInfo} />
                        <Route exact path={`${match.path}/ly2`} component={LossInfo} />
                        <Route exact path={`${match.path}/ly3`} component={FilesInfo} />
                        <Route component={NoMatch} />
                    </Switch>
                </content>
            </Layout>
        )
    }
}
const NoMatch=()=>(<div><h2>没有匹配的路径</h2></div>)
export default EcoMgr;