reactjs - 渲染时替换包含内容的路由

Question

我是 React/Typescript 的新手。我已经将几页放在一起，但遇到了一个概念上简单的挑战，我正在努力以一种优雅的方式解决。我希望有人能指出我无法找到的既定模式的方向。

我有一个包含 PageB 路由的页面 A。

渲染时，我希望 Page B 替换 PageA 的内容，而不仅仅是在其中渲染。

我正在使用 react-dom-router 5.x

我可以通过在我的应用程序顶部使用所有其他路由声明 PageB 路由来实现这一点，但是 a）在单个文件中包含所有应用程序路由似乎是一种反模式，并且 b）我的路由将不再嵌套.

我还尝试从 PageB 调用 ReactDOM.render 来清除 PageA 的内容。在我点击浏览器的后退按钮并显示空白的 pageA 之前，它工作得很好。

这不可能是一个不寻常的要求，所以我希望有一种优雅的方式来做到这一点，尽管我的搜索没有结果。

pageA 包含到 pageB 的链接

export const PageA = () => {
    const {url, path} = useRouteMatch();
    return (
        <div>
            <header>
                <h3>
                    Where would you like to go today?
                </h3>
            </header>
            <nav>
                <p>
                    <Link to={`${url}/pageB`}>
                        Page B
                    </Link>
                </p>
            </nav>
            <div>
                <Route path={`${path}/pageB`}   exact>
                    <PageB/>
                </Route>
            </div>
        </div>
    );
}

PageB 只包含一点文本

export const  PageB = ()=> {
        return (
            <div>
                <main>
                    Welcome to Page B
                </main>
            </div>
        );
}

编辑================================================== ===================== 我有一个解决方案，我将 PageA 提取<header><nav>到一个变量中，该变量根据path返回的值有条件地呈现useRouteMatch()。它有效，但不确定它是否优雅。

export const PageA = () => {
  const { url, path, isExact } = useRouteMatch();
  const nav =
    path === "/pageA" && isExact ? (
      <header>
          <h3>
              Where would you like to go today?
          </h3>
      </header>
      <nav>
          <p>
              <Link to={`${url}/pageB`}>
                  Page B
              </Link>
          </p>
      </nav>
      ):(
       ""
      );
   return (
      <>
        {nav}
        <Route path={`${path}/pageB`} exact>
            <PageB/>
        </Route>
    </>
  );
};

标签： reactjstypescript