重定向后，React路由器无法正常工作

Question

我正在使用react-router-dom在我的应用程序中创建多个页面。我有一个导航栏AppNavbar.jsx和一个路由文件Routing.jsx。在我的其中一个页面中，我正在执行某些操作之后将重定向带到/reports/:filters。问题是，在重定向之后，我所有的AppNavbar链接都转到/reports/goals或/reports/weights等。它们不应该加/reports。

我相信我在下面包含了所有适用的代码。

// Routing.jsx
class DebugRouter extends Router {
  constructor(props) {
    super(props);
    console.log('initial history is: ', JSON.stringify(this.history, null, 2));
    this.history.listen((location, action) => {
      console.log(
        `The current URL is ${location.pathname}${location.search}${location.hash}`,
      );
      console.log(
        `The last navigation action was ${action}`,
        JSON.stringify(this.history, null, 2),
      );
    });
  }
}

function Routing(props) {
  const { match } = props;
  const routerBaseName = getMetadata('router.basename');

  const { error: errorContext } = useContext(CombinedContext);

  return (
    <DebugRouter basename={routerBaseName}>
      {/* <Router basename={routerBaseName}> */}
      <ErrorModal error={errorContext} />
      <AppNavbar match={match} />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/goals">
          <Goals />
        </Route>
        <Route path="/weights">
          <Weights />
        </Route>
        <Route path="/skills">
          <Skills />
        </Route>
        <Route path="/exceptions">
          <Exceptions />
        </Route>
        <Route path={['/reports/:filters', '/reports']} component={Reporting} />
      </Switch>
      {/* </Router> */}
    </DebugRouter>
  );
}

// AppNavbar.jsx
function AppNavbar(props) {
  const publicURL = process.env.PUBLIC_URL;

  const urlLink = (path, title, disabled = false) => (
    <NavItem>
      <NavLink disabled={disabled} tag={RouterNavLink} to={`${path}`}>
        {title}
      </NavLink>
    </NavItem>
  );

  return (
    <Navbar
      className="shadow sticky-top header"
      style={{ minHeight: '64px', margin: '0 0 20px 0' }}
      color="dark"
      dark
      light
      expand="md"
    >
      <Container>
        <NavbarBrand tag={Link} className="d-flex align-items-center" to="/">
          <img
            className="mr-2"
            src={`${publicURL}/favicon-32x32.png`}
            width="36"
            height="36"
            alt=""
          />{' '}
          <span className="navbar-text text-light">Skill Management</span>
        </NavbarBrand>
        <Nav navbar className="ml-sm-auto">
          {urlLink('goals', 'Goals')}
          {urlLink('weights', 'Weights')}
          {urlLink('skills', 'Skills')}
          {urlLink('exceptions', 'Exceptions')}
          {urlLink('reports', 'Reporting')}
        </Nav>
        <Help />
        <Avatar />
      </Container>
    </Navbar>
  );
}

// Goals.jsx
    if (submitted) {
      return (
        <Redirect push from="/goals" to={`/reports/:${filters.join(',')}`} />
      );
    }