Reactjs 页面不显示

我被这个问题困扰了好几天，我在网上找到的解决方案没有任何帮助. 我的路由不能正常工作.URI正在更新，但未根据路径显示相应的页面. 当我刷新浏览器时，只有在那时，适当的页面才会出现.否则，即使路径更改，也只显示主页.

我会尽我最大的努力在这里用尽代码:

package.json个

...
"history": "^5.3.0",
"node-sass": "^8.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.1",
...

AppRoutes.js个

import { useRoutes } from 'react-router-dom';
...

const AppRoutes = () => {
    const routes = useRoutes([
        { path: PATH.home, element: <page.Home /> },
        { path: PATH.defect, element: <page.Defect /> },
        { path: PATH.other, element: <page.Other /> },
        { path: PATH.allRoutes, element: <page.Home /> }
    ]);

    return routes;
}

Navbar.js个

...
import history from '../../utils/BrowserHistory';
...

/**
 * I am using semantic UI menu
 * Here I push the path for a browser route change
 */
handleItemClick = (e, { name }) => {
        this.setState({ activeItem: name });

        switch (name) {
            case APP_CONST.home:  
                history.push(PATH.home);
                break;
            case APP_CONST.defect:
                history.push(PATH.defect);
                break;
            case APP_CONST.other:
                history.push(PATH.other);
                break;
            default:
                history.push(PATH.home);
                break;
        }
    }
...

render() {
        const { activeItem } = this.state;

        return (
            <Fragment>
                {
                    this.state.width <= NUMBER.mobileScreenSize ?
                        <MobileNav
                            onToggle={this.handleToggle}
                            visible={this.state.visible}
                            onPusherClick={this.handlePusher}
                            item={activeItem}
                            handleItemClick={this.handleItemClick}
                        >
                            <NavBarChildren>{this.props.children}</NavBarChildren>
                        </MobileNav> :
                        <DesktopNav item={activeItem} handleItemClick={this.handleItemClick}>
                            <NavBarChildren>{this.props.children}</NavBarChildren>
                        </DesktopNav>
                }
            </Fragment>
        )
    }
}

const NavBarChildren = props => (
    <Container>{props.children}</Container>
);

DesktopNav.js个

export const DesktopNav = props => {

    const { item, handleItemClick, children } = props;

    return (
        <React.Fragment>
            <Menu fixed='top' pointing secondary>
                <Menu.Menu>
                    <MenuItems item={item} handleItemClick={handleItemClick} />
                </Menu.Menu>
            </Menu>
            <div className='desktop-menu-items'>{children}</div>
        </React.Fragment>
    );
}

App.js个

imports ...

function App() {
  return (
    <NavigationBar>
      <AppRoutes />
    </NavigationBar>
  )
}

index.js个

...
import { BrowserRouter } from 'react-router-dom';
import history from './utils/BrowserHistory';
...

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter history={history}>
        <App />
    </BrowserRouter>
);

Please assist, thanks in advance...个