点击左侧导航，右侧会有变化，使用router4应该怎么写左侧导航中的跳转

Question

使用react加antd做后台管理系统，点击左侧导航，右侧会有变化，使用router4应该怎么写左侧导航中的跳转

比如说我点击 平台管理 右侧会有一个表格

点击 车型管理 右侧会变成一个图表

<div>
        <header className='header'>
          ReactManager
        </header>
        <main className='main'>
          <div className='menu'>
            <div>
              123
            </div>
            <Menu mode="inline" theme="dark" style={{width: '240px'}}>
              <SubMenu key="user" title={<span><Icon type="user"/><span>OTA管理</span></span>}>
                <MenuItem key="platform-manage">
                  平台管理
                </MenuItem>
                <MenuItem key="car-manage">
                  车型管理
                </MenuItem>
                <MenuItem key="device-manage">
                  设备管理
                </MenuItem>
                <SubMenu key="introduce-manage" title="发布管理">
                  <Menu.Item key="10">发布任务</Menu.Item>
                  <Menu.Item key="11">版本管理</Menu.Item>
                  <Menu.Item key="12">测试设备管理</Menu.Item>
                </SubMenu>
                <SubMenu key="count-manage" title="统计管理">
                  <Menu.Item key="15">进度任务</Menu.Item>
                </SubMenu>
              </SubMenu>
              <SubMenu key="book" title={<span><Icon type="book"/><span>图书管理</span></span>}>
                <MenuItem key="book-list">
                  图书列表
                </MenuItem>
                <MenuItem key="book-add">
                  添加图书
                </MenuItem>
              </SubMenu>
            </Menu>
          </div>
          <div className='content'>
            <Device />
          </div>
        </main>
      </div>

Answer 1

导航用Link包起来，指定要跳转的路由。

同时对路由设置对应的页面内容，比如表格/图表。