React Router Dom，基于URL更新组件失败

Question

我正在为简单的电子商务网站制作 react-app，路线如下

<Switch>
  <Route exact path='/' component={Home} />
  <Route path='/login' component={Login} />
  <Route path='/signup' component={Signup} />
  <Route exact path='/top-products' component={TopProducts} />
  <Route path='/product/list' component={ProductList} />
  <Route path='/products/details/:id' component={ProductDetails} />
</Switch>

除了/products/details/:id之外，所有这些都运行良好

import React, { Component } from 'react'
import Navbar from '../Navbar/Navbar'
import Parser from 'html-react-parser';
import './ProductDetails.css'
import Search from '../search/search';
import ProductCard from '../ProductCard/ProductCard'
import { Redirect } from 'react-router-dom';

export default class ProductDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      data: [],
      recommendedData: [],
      id: this.props.match.id
    }
  }

  BASE_URL = 'https://upachar.com.np/'

  async componentDidMount() {
    console.log(this.props.match.params.id)
    const id = this.props.match.params.id
    const url = `${this.BASE_URL}api/v1/pharmacy/products/${this.props.match.params.id}`
    const response = await fetch(url)
    const data = await response.json()
    const recommendedUrl = this.BASE_URL + `api/v1/pharmacy/related-products/${this.props.match.params.id}`
    const recommendedResponse = await fetch(recommendedUrl)
    const recommendedData = await recommendedResponse.json()
    console.log('component did mount recommended product', recommendedData.data)
    this.setState({ data: data.data, loading: false, recommendedData: recommendedData.data })
  }

  componentDidUpdate(prevProps) {
    console.log('component did update')
    if (prevProps.match.params.id !== this.props.match.params.id) {
      console.log(prevProps.match.params.id, this.props.match.params.id)
      this.setState({ id: this.props.match.params.id })
    }
  }

  getImages = () => {
    return this.state.data.images.map(
      function (item, self) {
        const BASE_URL = this.BASE_URL.substring(0, this.BASE_URL.length - 1);
        return <img src={`${BASE_URL}${item}`} alt="image" style={{ 'height': '248px', 'width': '248px' }} />
      }, this)
  }

  getVariants = () => {
    return this.state.data.variants.map((item) => <div><ul>
      <p><b>Variant:</b> {item.name} <br /> <strong>Npr: </strong> {item.price}/{this.state.data.UOM.name}</p>
    </ul>
    </div>, this)
  }

  getRecommendedProducts() {
    return this.state.recommendedData.map((item) => {
      return <ProductCard
        title={item.name}
        UOM={item.UOM}
        price={item.price}
        image={item.thumbnails[0]}
        url={`/products/details/${item.id}`}
        manufacturer={item.manufacturer}
      />
    })
  }

  render() {
    if (this.state.loading) {
      return <h1>Loading...</h1>
    }
    return (
      <div>
        <Navbar />
        <Search />
        <div className="container">
          <h2 className='ProductDetails-title'>{this.state.data.name}</h2>
          <div className="row">
            <div className="col sm12 md6">
              <div className='ProductDetails-product-images'>{this.getImages()}</div>
            </div>

            <div className="col sm12 md3">
              <div className='ProductDetail-variants'>{this.getVariants()}</div>
            </div>
          </div>
          <div className='ProductDetails-details'>{Parser(this.state.data.details)}</div>
          <h4>Recommendations:</h4>
          <div className="ProductDetails-see-also">
            {this.getRecommendedProducts()}
          </div>
        </div>
      </div>
    )
  }
}

在这个细节组件中，我通过获取 id。 this.props.match.params.id 和 componentDidMount() 我获取产品详细信息以及有关推荐产品的详细信息，并将它们呈现为 ProductCard 组件。 问题是每当我点击Link 到新产品时，url 会发生变化，但产品详细信息会显示以前的详细信息。 如何更新它以显示当前产品。我尝试使用ComponentDidUpdate 解决，但我仍然遇到同样的问题。

ProductCard 组件

import React from 'react'
import { Link, Redirect } from 'react-router-dom'
import { v4 as uuidv4 } from 'uuid';

export default function DisplayCard({ title,
  UOM,
  price,
  image,
  url,
  manufacturer }) {
  const BASE_URL = 'http://www.upachar.com.np';

  return (
    <div className="card" style={{ 'width': '248px', height: '428px', 'margin': '20px' }}>
      <div className="card-image waves-effect waves-block waves-light" style={{ 'cursor': 'default' }}>
        <img className="card-image" src={`${BASE_URL}/${image}`} style={{ 'width': '248px', height: '248px' }} />
      </div>
      <Link to={url}>
        <div className="card-content">
          <span className="card-title grey-text text-darken-4">{title}</span>
          <div>By: {manufacturer}</div>
          <div>Price : NPR.{price} per {UOM} </div>
        </div>
      </Link>
    </div>
  )
}

如果我手动刷新浏览器，该 url 有效。但在 url 更改时不会自动发生。我试图从昨天开始解决这个问题，但没有运气。请帮助我或指出我的解决方案，谢谢。

PS。 github link

Answer 1

一个解决方案，所以基本上我正在做的是使用componentDidMount生命周期方法来获取所有数据。所以我需要一种方法来强制重新安装 url 更改。

我在<route.../> 中使用key 强制重新安装，这样我的新路线就像

    <Switch>
       <Route exact path='/' component={Home} />
       <Route path='/login' component={Login} />
       <Route path='/signup' component={Signup} />
       <Route exact path='/top-products' component={TopProducts} />
       <Route path='/product/list' component={ProductList} />
       <Route exact path='/products/details/:id' render={(props) => 
       <ProductDetails key={Date.now()} {...props} id={props.match.params.id} />} />
       <Route render={(props) => <h1>404, Page Not Found!</h1> }/>
   </Switch>