重新加载页面时，使用ngix响应路线问题

Question

我正在一个项目中，该项目通过登录页面对用户进行身份验证，然后用户进入带有侧边栏菜单的页面，该菜单栏可在用户的帐户的不同页面之间导航。事实是，当页面在本地重新加载时，一切运行正常，并且没有错误发生。然而，在服务器上存在一个问题，该问题使得任何页面均会掉落，并在每次重新加载时显示404错误，如下所示：

这是我为侧边栏设置路线的方法：

let { path, url } = useRouteMatch();

    const sideBar = [
        { id: 0, name: "Dashboard", icon: dashboard, path: `${url}/`, exact: true, component: Dashboard },
        { id: 0, name: "Payments", icon: payments, path: `${url}/payments`, component: Payments },
        { id: 1, name: "Leads", icon: leads, path: `${url}/leads`, component: Leads },
        { id: 2, name: "Orders", icon: orders, path: `${url}/orders`, component: Orders },
        { id: 3, name: "Customers", icon: customers, path: `${url}/customers`, component: Customers },
        { id: 4, name: "Profile", icon: profile, path: `${url}/profile`, component: Profile },
        { id: 5, name: "Branches", icon: profile, path: `${url}/branches`, component: Branches },
        { id: 6, name: "Administration", icon: administration0, path: `${url}/administration`, component: Administration },
    ];

const RenderSidebar = () => {
        return (
            sideBar.map((route, index) =>
                <Nav style={{ display: "flex" }} className={`${route.name.toLowerCase()}`}>
                    {route.name === "Reports" ?
                        <NavItem className="sublink-wrapper">
                            <NavLink to={`${route.path}`}>
                                <ListGroupItem key={index}><img className={`${isToggleSideBar ? "toggled" : ""} icon-img`} src={route.icon} />{route.name}</ListGroupItem>
                            </NavLink>
                            <div className="sublinks">
                                <NavLink to={`${route.path}/ordersanalysis`}>
                                    <ListGroupItem key={index}><img className={`${isToggleSideBar ? "toggled" : ""} icon-img`} src={ordersAnalysis} />Orders Analysis</ListGroupItem>
                                </NavLink>
                                <NavLink to={`${route.path}/customersanalysis`}>
                                    <ListGroupItem key={index}><img className={`${isToggleSideBar ? "toggled" : ""} icon-img`} src={customersAnalysis} />Customer Analysis</ListGroupItem>
                                </NavLink>
                                <NavLink to={`${route.path}/paymentanalysis`}>
                                    <ListGroupItem key={index}><img className={`${isToggleSideBar ? "toggled" : ""} icon-img`} src={paymentAnalysis} />Payment Analysis</ListGroupItem>
                                </NavLink>
                            </div>
                        </NavItem>
                        :
                        (route.name === "Profile" ?
                            <NavItem className="sublink-wrapper">
                                <NavLink to={`${route.path}`} onClick={() => {
                                    setToggled(!isToggled);
                                    setLink("sublink-toggled");
                                }}>
                                    <ListGroupItem key={index}><img className={`${isToggleSideBar ? "toggled" : ""} icon-img`} src={route.icon} />{route.name}</ListGroupItem>
                                </NavLink>
                                <div className={`sublinks ${isToggled && isSublink}`}>
                                    <NavLink to={`${route.path}/businessdetails`}>
                                        <ListGroupItem key={index}><img className={`${isToggleSideBar ? "toggled" : ""} icon-img`} src={businessDetails} />Business Details</ListGroupItem>
                                    </NavLink>
                                    <NavLink to={`${route.path}/companydocuments`}>
                                        <ListGroupItem key={index}><img className={`${isToggleSideBar ? "toggled" : ""} icon-img`} src={companyDocuments} />Company Documents</ListGroupItem>
                                    </NavLink>
                                    <NavLink to={`${route.path}/products&services`}>
                                        <ListGroupItem key={index}><img className={`${isToggleSideBar ? "toggled" : ""} icon-img`} src={companyDocuments} />Producst & Services</ListGroupItem>
                                    </NavLink>
                                    <NavLink to={`${route.path}/workinghours`}>
                                        <ListGroupItem key={index}><img className={`${isToggleSideBar ? "toggled" : ""} icon-img`} src={workingHours} />Working Hours</ListGroupItem>
                                    </NavLink>
                                    <NavLink to={`${route.path}/discounts`}>
                                        <ListGroupItem key={index}><img className={`${isToggleSideBar ? "toggled" : ""} icon-img`} src={coupons} />Discounts & Coupons</ListGroupItem>
                                    </NavLink>

                                </div>
                            </NavItem>
                            :
                            <NavLink to={route.path}>
                                <ListGroupItem key={index}><img className={`${isToggleSideBar ? "toggled" : ""} icon-img`} src={route.icon} />{route.name}</ListGroupItem>
                            </NavLink>)
                    }
                </Nav>
            ))
    }

这是一个呈现我的侧边栏的函数，我声明以下路线以浏览不同的路线，如下所示：

    {sideBar.map((route, index) => (
                                    <Route
                                        key={index}
                                        path={route.path}
                                        exact={route.exact}
                                        component={route.component} />
                                ))}

我是否需要在此处进行任何更改，以便结束此错误。我已经花了数周的时间解决这个问题，但没有找到解决方法。