react使用二级（多级）路由（rout）实现局部跳转

这种用法其实在实际开发中，很多地方都要用到。但是在百度以后却发现没有相关的帖子。{黑人问号？}

对于很多新入坑react的小伙伴来说，可能遇到过需要用route的地方就是在页面跳转的时候。但是随着进一步的实践，发现，如果想要只在某个div里面实现跳转，（比如当我们点击了side中的某个menu后，想要右边的content显示为对应的）该怎么办呢？还是使用以前的route方法？

那肯定是不行的，这里我们就要使用到二级路由

话不多说，直接上代码：
最外层route

 <Provider store={Store.provider}>
                    <Router history={global.History}>

                        <Switch>
                        
                            <Route path="/Home" exact component={Home}/>
                            <Route path='/configPanel' component={ConsolePanel}/>          
                            <Route path='/login' component={Login}/>
                           

                        
                        </Switch>
                    </Router>
                    
                </Provider>

二级route （这个switch在ConsolePanel组件中）

<Layout>
                        <Sider width={200} style={{ background: '#fff' }}>
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                style={{ height: '100%', borderRight: 0 }}
                                theme='dark'
                            >
                                <SubMenu key="sub1" title={<span><Icon type="laptop" />系统管理</span>}>
                                    <Menu.Item key="1">
                                        <Link to='/configPanel/test'>用户管理</Link>
                                    </Menu.Item>
                                   
                                </SubMenu>
                               
                            </Menu>
                            {/* <PanelSide/> */}
                        </Sider>

                        <Layout style={{ padding: '0px' }}>
                       
                            <Content style={{
                                background: '#fff', padding: 24, margin: 0, minHeight: 280,
                            }}
                            >
                                <Switch>

                                    <Route path="/configPanel/test" component={Test} />
                                       

                                </Switch>
                            </Content>
                        </Layout>
                    </Layout>

注意这里route 的path

第一层，/configPanel
第二层，/configPanel/test

原理：<Link to='/configPanel/test'/> => 识别到有两层，/configPanel和/test，对于路由来说，我们现在在/configPanel这一层发起跳转请求，而根据path，跳转的目标也是在这一层，所以就会在/configPanel中的route进行匹配,然后再switch 除渲染对应的组件