我在Azure上发布了.Net core和react webb应用程序。链接在本地服务器上工作正常，但一旦我运行npm run build并将build文件夹的内容添加到live服务器，则一切正常，但链接不工作并给出404错误。在App.js中：

import logo from './logo.svg';
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import AppRoutes from './AppRoutes';

import './App.css';
import PRODUCTS from './Components/Products';
import CUSTOMERS from './Components/Customers';
import STORES from './Components/Store';
import SALES from './Components/Sales';
import NavigationBar from './Components/Navbar';

function App() {
    return (
        <Router> 
            <NavigationBar />  
            <div>
                <Routes>
                    <Route path="/" element={<CUSTOMERS />}>         </Route>
                    <Route path="/customers" element={<CUSTOMERS />}>         </Route>
                    <Route path="/products" element={<PRODUCTS/>} >   </Route>
                    <Route path="/stores" element={<STORES/>} >   </Route>
                    <Route path="/sales" element={<SALES/>} >   </Route>
                 </Routes>             
            </div> 
        </Router>

  );
}

export default App;

字符串
在navbar.js

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

const NavigationBar = () => {
    return (
        <Navbar bg="dark" variant="dark">
            <Navbar.Brand href="#">Onboarding App</Navbar.Brand>
            <Nav className="mr-auto">
                <Nav.Link href="/customers">Customers</Nav.Link>
                <Nav.Link href="/products">Products</Nav.Link>
                <Nav.Link href="/stores">Stores</Nav.Link>
                <Nav.Link href="/sales">Sales</Nav.Link>
            </Nav>
        </Navbar>
    );
};

export default NavigationBar;

型

的数据
https://onbo2023-frontend.azurewebsites.net/products