页面不显示

Question

我被这个问题困扰了好几天，我在网上找到的解决方案没有帮助。 我的路线工作不正常。 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>
);

请协助，提前致谢...

Answer 1

BrowserRouter

不消耗

history

道具。

BrowserRouter

维护自己的内部

history

引用，因此不知道您的自定义

history

对象所做的 URL 更改。

如果您要从该

history

组件中的自定义

Navbar

对象执行导航操作，而不是使用

Link

组件，那么您将需要使用可以采用自定义

history

对象的路由器，以便它可以同步它使用 URL 管理的路由改变了

history

对象效果。

您可以导入

HistoryRouter

，会消耗

history

道具。

例子：

...
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
import history from './utils/BrowserHistory';
...

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