Question

我已经通过create-react-app创建了一个应用。我想为我的应用程序（React Router v4）使用HashRouter功能，但是它无法正常工作。其实我不知道为什么。即当我单击contact链接时，URL更改为路由/contacts，但未显示相关组件。它仍然显示先前加载的组件。链接放置在Navigation组件中。这是Link的一个示例。

<Link key={"navigation" + bu.name + "Key"} 
      to="/products" 
      className="nav-link dropdown-item imageLink animated" 
      onClick={(e) => this.handleClickBU(e, bu.bu)}>{bu.name}
</Link>

这是我的App.js代码：

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  HashRouter,
  Route,
  Link,
  Switch
} from "react-router-dom";

<HashRouter>
  <div>
    <Background />
    <div id="wrap">
      <div id="main" className="container clear-top marginBottom50px main">
        <div id="content">
          <Navigation
            key="navBar"
            languagesToShow={this.state.languagesToShow}
            currentLanguage={this.state.currentLanguage}
            onLanguageChange={this.handleLanguageChange.bind(this)}
            onBUChange={this.handleBUChange.bind(this)}
            onIndustryChange={this.handleIndustryChange.bind(this)}
            onCountryChange={this.handleCountryChange.bind(this)}
          />
          <Route
            key={"mainPageRoute"}
            path={"/"}
            exact={true}
            render={(routeProps) => (
              <MainPage
                {...routeProps}
                currentLanguage={this.state.currentLanguage}
                country={this.state.countryObject}
                contacts={this.state.contacts}
                onCountryChange={this.handleCountryChange.bind(this)}
              />
            )}
          />
          <Route
            key={"contactRoute"}
            path={"/contact"}
            exact={true}
            render={(routeProps) => (
              <ContactList
                {...routeProps}
                showCountrySelection={true}
                currentLanguage={this.state.currentLanguage}
                country={this.state.countryObject}
                contacts={this.state.contacts}
                onCountryChange={this.handleCountryChange.bind(this)}
                key={"contactList"}
              />
            )}
          />
          <Route
            key={"productsRoute"}
            path={"/products"}
            exact={true}
            render={(routeProps) => (
              <Products
                {...routeProps}
                ref={this.props.innerRef}
                key="products"
                isLoading={this.state.isLoading}
                country={this.state.countryObject}
                currentLanguage={this.state.currentLanguage}
                currentBU={this.state.currentBU}
                showMainProductGroups={this.state.showMainProductGroups}
                showMainProductGroupDetails={
                  this.state.showMainProductGroupDetails
                }
                showProductGroupDetails={this.state.showProductGroupDetails}
                mainProductGroups={this.state.mainProductGroups}
                onShowMainProductGroupDetailsChange={this.handleShowMainProductGroupDetailsChange.bind(
                  this
                )}
                onShowProductGroupDetailsChange={this.handleShowProductGroupDetailsChange.bind(
                  this
                )}
                onBUChange={this.handleBUChange.bind(this)}
                onCountryChange={this.handleCountryChange.bind(this)}
              />
            )}
          />
        </div>
      </div>
    </div>
  </div>
</HashRouter>;

任何人都可以告诉我，为什么更新url，但是不更新该组件吗？

更新

我已经搜索了很多东西，并且在反应训练站点上找到了this link。

我尝试了不同的方法，但是没有人没有解决我的问题。但是，当我将HashRouter更改为Router时，效果很好！！！为什么！？！可能是HashRouter的问题/错误吗？

HashRouter URL在单击时更新，但组件未更新（阻止更新）

0 个答案: