How do I set up a route when I am calling other functions in my App.jsx file in my static react project?

Question

I have tried moving the BrowserRouter from react-router-dom from my main.jsx file to my App.jsx file but it does not work.

This is what I have in my App.jsx:

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

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

It just shows up on the same page as my other components when I want it as if it is a separate page.

Answer 1

Currently all the content content other than Resume is unconditionally rendered. If you would like it to also be conditionally rendered then move the content into a route.

Example:

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

If you want each page to render with the header and footer then these can be moved out of the routes to be unconditionally rendered.

Example:

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