javascript 在静态react项目中调用App.jsx文件中的其他函数时，如何设置路由？

s3fp2yjn 于 2023-05-21 发布在 Java

关注(0)|答案(1)|浏览(128)

我尝试将BrowserRouter从react-router-dom从我的main.jsx文件移动到我的App.jsx文件，但它不起作用。
下面是我在App.jsx中的代码：

export default function App() {
  return (
    <>
      <PageHeader />
      <About />
      <Works />
      <Contact />
      <Footer />

      <Routes>
        <Route path="/resume" element={<Resume />} />
      </Routes>
    </>
  )
}

它只是显示在同一页上，因为我的其他组件时，我想要它，就好像它是一个单独的页面。

JavaScript

来源：https://stackoverflow.com/questions/76293653/how-do-i-set-up-a-route-when-i-am-calling-other-functions-in-my-app-jsx-file-in

1条答案

按热度按时间

q43xntqr1#

当前，所有内容content * 除了 * Resume都是无条件渲染的。如果你希望它也被 * 有条件地 * 呈现，那么把内容移动到一个路由中。
示例：

export default function App() {
  return (
    <Routes>
      <Route
        path="/"
        element={(
          <>
            <PageHeader />
            <About />
            <Works />
            <Contact />
            <Footer />
          </>
        )}
      />
      <Route path="/resume" element={<Resume />} />
    </Routes>
  );
}

如果你想让每个页面都呈现页眉和页脚，那么可以将它们从路由中移出，无条件地呈现。
示例：

export default function App() {
  return (
    <>
      <PageHeader />
      <Routes>
        <Route
          path="/"
          element={(
            <>
              <About />
              <Works />
              <Contact />
            </>
          )}
        />
        <Route path="/resume" element={<Resume />} />
      </Routes>
      <Footer />
    </>
  );
}

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 在静态react项目中调用App.jsx文件中的其他函数时，如何设置路由？

1条答案

相关问题

热门标签

最新问答