Я создал приложение через create-react-app
.Я хочу использовать функциональность HashRouter
для моего приложения (React Router v4), но она не работает должным образом.На самом деле я не знаю почему.Т.е. когда я нажимаю на ссылку 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 обновляется, нокомпонент не?
ОБНОВЛЕНИЕ
Я уже много искал и нашел эту ссылку на сайте обучения реакции.
Я пробовал разные вещи, но никто не решил мою проблему.Но когда я меняю HashRouter
на Router
, он работает нормально !!!Зачем!?!Это может быть проблема / ошибка HashRouter
?