URL将更新url页面，将不使用react路由器呈现。

Question

我有以下应用程序组件：

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>
    );
  }
}

这(出于某种原因)导致了奇怪的行为。当我试图从开关内的组件中跟随链接组件时，url会更新，但是页面不会重新呈现或刷新到新页面。假设显示了/about/页面的组件，并包含指向/agb/的链接，url将表示www.example.com/agb/，但我将位于about页面上。如果手动刷新，则位于/agb/页面。

奇怪的是，头组件似乎工作得很好。如果我单击来自Link的Header，一切都可以工作。我还尝试只使用一个Router组件，并使用相同的结果手动插入历史记录。

更新所以，我删除了react路由器和react路由器-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);