when using react and antdesign as background, I need to implement this function:

use the Tab component, click the label to change the route to realize the reloading of the data below, but there is always a problem when you do it. After clicking, it will display 404 and cannot be loaded.
the basic code is as follows:

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>
    )
  }

routing part code

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>

how can I correct this problem?