react路由设置问题

Question

使用react以及antdesign来做后台的时候，我需要实现这样一个功能：

使用的Tab组件，点击标签改变路由实现下方数据的重新加载，但是在做的时候一直有问题，点击之后就显示404，不能进行加载。
基础代码如下：

tabChange = (key) => {
    const { dispatch, match } = this.props;
    switch (key) {
      case 'remainTime':
        dispatch(routerRedux.push(`${match.url}/daysTable`));
        break;
      case 'remainDistance':
        dispatch(routerRedux.push(`${match.url}/mileageTable`));
        break;
    }
  }

  render() {
    let { apps, match } = this.props
    const tabList = [
      {
        key: 'remainDistance',
        tab: '剩余3000公里到期',
      }, {
        key: 'remainTime',
        tab: '剩余60天到期',
      },
    ]

    const routes = [
      {
        path: `${match.path}/mileageTable`,
        component: () => import('./remainDistance'),
      },
      {
        path: `${match.path}/daysTable`,
        component: () => import('./remainTime'),
      },
    ]

    return (
      <div className={styles.container}>
        <Tabs defaultActiveKey="remainDistance" onChange={this.tabChange}>
          <TabPane tab="剩余3000公里到期" key="remainDistance" />
          <TabPane tab="剩余60天到期" key="remainTime" />
        </Tabs>
        <Switch>
          <Route exact path={match.path} render={() => (<Redirect to={`${match.path}/mileageTable`} />)} />
          {
            routes.map(({ path, ...dynamics }, key) => (
              <Route key={key}
                path={path}
                exact
                component={dynamic({
                  app: apps,
                  ...dynamics,
                })}
              />
            ))
          }
        </Switch>
      </div>
    )
  }

路由部分代码

const MaintainFilter = dynamic({
    app,
    component: () => import('./routes/reverseManage/maintainFilter'),
  })

<LocaleProvider locale={zhCN}>
      <ConnectedRouter history={history}>
        <App>
          <Switch>
            <Route exact path="/reverseManage/maintainFilter" render={() => (<Redirect to="/reverseManage/maintainFilter/mileageTable" />)} />
            {
              routes.map(({ path, ...dynamics }, key) => (
                <Route key={key}
                  exact={path === '/reverseManage/maintainFilter'  ? false : true}
                  path={path}
                  component={dynamic({
                    app,
                    ...dynamics,
                  })}
                />
              ))
            }
            <Route path="/reverseManage/maintainFilter" render={props => <MaintainFilter apps={app} {...props} />} />
            <Route component={error} />
          </Switch>
        </App>
      </ConnectedRouter>
    </LocaleProvider>

请问下我可以怎么修改才可以改正这个问题？