Question

我具有以下App组件：

const { store, persistor } = storeFunc()

// manually pass into <Router history={history}>
// const history = createBrowserHistory();

class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <BrowserRouter>
            <BlockScroll>
              <Header />
              <DisplayModals />
                <div className="page" ref={(page) => this.page = page}>
                  <Switch>
                    {/* // KITCHEN ROUTES */}
                    <Route component={About} exact path="/about/" />
                    <Route component={GTC} exact path="/agb/" />
                    <Route component={GdprDetail} exact path="/gdpr/" />
                    <Route component={OrderRequestSuccess} exact path="/services/order-request-success/" />
                    {/* // USER ROUTES */}
                    <Route component={ResendActivation} exact path="/resend-activation/" />
                    <Route component={requireAuth(Account)} exact path="/account/" />
                    <Route component={requireAuth(AccountManagement)} exact path="/account-management/" />
                    <Route component={ActivateUserLanding} exact path="/activate-user/:uidb64/:token/" />
                    <Route component={ResetPasswordForm} exact path="/reset-password/:uidb64/:token/" />
                    <Route component={ActivateUser} exact path="/activate-user" />
                    <Route component={Registration} exact path="/registration" />
                    <Route component={requireAuth(KitschoenIndex)} exact path="/kitchen-index" />
                    {/* // STATIC ROUTES */}
                    <Route component={ContactForm} exact path="/contact/" />
                    <Route component={IndexView} exact path="/" />
                  </Switch>
                </div>
              <Footer />
            </BlockScroll>
          </BrowserRouter>
        </PersistGate>
      </Provider>
    );
  }
}

（出于某种原因）这会产生奇怪的行为。当我尝试从Switch中的组件跟踪链接组件时，URL将更新，但页面不会重新呈现或刷新到新页面。假设/about/页面的组件已显示，并且包含指向/agb/的链接，URL将显示www.example.com/agb/，但我将停留在about页面上。如果我手动刷新，则位于/agb/页面。

奇怪的是，Header Component似乎工作正常。如果单击Link中的Header，一切正常。我还尝试仅使用Router组件，并手动插入具有相同结果的历史记录。

更新因此，我删除了react-router和react-router-dom并重新安装了它。之后，它又可以工作了……

npm uninstall --save react-router
npm uninstall --save react-router-dom

Answer 1

您必须将组件包装在 withRouter 中。

import { withRouter } from "react-router-dom";
...
...
...
export default withRouter(App);

网址将更新网址页面将无法使用react-router呈现

1 个答案: