反应嵌套路线

Question

我正在使用ReactJS构建一个应用程序，并尝试在react-router-dom v5中使用嵌套路由。使用嵌套路由渲染组件时出现问题，我不知道为什么。如果有人在我把头撞到墙上之前能帮助我，我将不胜感激！

This is my main page

当我单击链接“固定装置”时，我想在“站立”位置处渲染另一个h1，但是当我单击他时，我的主要组件消失了。

This is my problem

我在这里留下我的代码。

const App = () => (
  <>
    <Router history={history}>
      <Header />
      <MainRoutes />
      <GlobalStyle />
    </Router>
  </>
);
-----------------------------------------------------------------
const Routes = () => (
  <Switch>
    <Redirect exact from="/" to="/portugal" />
    <Route path="/:pais/" component={MainContent} exact />
  </Switch>
);
-----------------------------------------------------------------
const Standings = () => <h1>Standings</h1>;
const Fixtures = () => <h1>Fixtures</h1>;

const MainContent = () => {
  const { path, url } = useRouteMatch();

  return (
    <MainContentContainer>
      <ul className="options-nav">
        <li>
          <NavLink to={`${url}`}>Standings</NavLink>
        </li>
        <li>
          <NavLink to={`${url}/fixtures`}>Fixtures</NavLink>
        </li>
      </ul>

      <Route exact path={`${path}`}>
        <Standings />
      </Route>
      <Route exact path={`${path}/fixtures`}>
        <Fixtures />
      </Route>
    </MainContentContainer>
  );
};