How to Deploy a React Router-Based Application to server?

I want to deploy the react-router-based application. When I deploy the build of my site it works properly but it cannot do anything when I hit any URL of my site. the main purpose of my is to that how we tell the deployment to use the react-routes. the code of react-router-dom is

<Router>
            {/* here I add some default component that show at every page */}
            <div className="App">
              <Navbar mode={"dark"} />
              <Alert />
              {/* here I add some default component that show at every page */}

              {/* add some components that change as route change. */}
              <Routes>
                <Route path="/contact" element={<ContactUs />} />
                <Route path="/city" element={<AllCities />} />
                <Route path="/city/:cityName" element={<CityProfile />} />
                <Route path="/city/:cityName/:articale" element={<Article />} />
                <Route path="/news" element={<News />} />
                <Route path="/about" element={<About />} />
                <Route path="/Login" element={<Login />} />
                <Route path="/Signup" element={<Signup />} />
                <Route path="/User/:username" element={<User />} />
                <Route path="/" element={[< LandingPage />, <TopCites />]} />
                <Route path='/page not found' element={<NotFound />} />
                <Route path='*' element={<NotFound />} />
              </Routes>
              {/* add some components that change as route change. */}
              {/* routes end at here */}
              <Footer />
            </div >
          </Router>

Now how do I tell the server to use these routes after deployment? the URL of my site is the URL of the site its workflow is smooth but when I hit the URL of any page (page of the site ) of my site it show the error of page not found. kindly tell me how to sort this type of problem.