I built a react project. The react version is 17.0.2 and the react-router-dom version is 6.2.1. I used "npm run build" and deployed the build folder to the server. The site can be visited and the site can jump to any specific page when I click the link button on the homepage or any other pages. But except homepage, when I refresh the page or I use the URL to visit this page, it will show "not found". This situation doesn't appear on local when I code. What is causing this problem and how to address it? Thanks! The following is part of my code on index.js and app.js

index.js

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

app.js

function App() {
 return (
    <div>
      <Header />
      <Routes>
        <Route path="/" element={ <Landingpage />} exact />
        <Route path="/aboutus" element={ <AboutUsPage />} />
        <Route path="/myservice" element={ <MyServicePage />} />
        <Route path="/portfolio" element={ <PortfolioPage />} exact />
        <Route path="/portfolio/:projectId" element={ <ProjectPage />} />
        <Route path="/contact" element={ <ContactPage />} />
      </Routes>
    </div>
  );