react-router-dom <链接>不更新页面 [英] react-router-dom &lt;Link&gt; Not Updating Page

问题描述

问题描述:

通过链接标签更改此 url 的 id(仅数字)不会更新页面(但会更改地址栏中的 url).之后点击刷新将显示更新的页面.

http://localhost:8080/video/id/7564

右键单击以在新选项卡中打开链接，或将链接路径更改为完全不同的页面，按预期工作.

我的 app.js 文件

从 'react' 导入 React从'react-router-dom'导入{路由器，路由，交换机}从'../components/homePage/RenderHomepage'导入RenderHomepage从 '../components/channelPage/RenderChannelPage' 导入 RenderChannelPage从 '../components/videoPage/RenderVideoPage' 导入 RenderVideoPage从 '../components/searchPage/RenderSearchPage' 导入 RenderSearchPage从'../components/PageNotFound'导入PageNotFound从'../history'导入历史const App = () =>{返回 (<div><路由器历史={历史}><开关><Route path="/" 精确组件={RenderHomepage}/><Route path="/channel" component={RenderChannelPage}/><Route path="/video/id" component={RenderVideoPage}/><Route path="/search" component={RenderSearchPage}/><Route path="/404" 精确组件={PageNotFound}/><路由组件={PageNotFound}/></开关></路由器>

)}导出默认应用

UpNextVideos 组件中的链接标签:

从 'react' 导入 React从'react-router-dom'导入{链接}...<Link to={{pathname: vid.id}}><h3 className={`${p}-sidebar-grid-video-title`}>{capitalizeFirstLetter(vid.tags)}</h3></链接>...

有问题的组件是如何嵌套的:

<视频页面><UpNextVideos>

RenderVideoPage 组件:

从 'react' 导入 React从 './VideoPage' 导入 VideoPage从'../Header'导入标题从 '../HeaderMobile' 导入 HeaderMobile从 '../FooterMobile' 导入 FooterMobile从 '../ActivityFeed' 导入 ActivityFeedconst RenderVideoPage = () =>{返回 (<div className="videoPage-body"><HeaderMobile/><标题/><ActivityFeed page={'home'}/><视频页面/><FooterMobile page={'video'}/>

)}导出默认RenderVideoPage

VideoPage 组件:

import React, { useEffect, useState } from 'react'从 'axios' 导入 axios从../../history"导入历史从 './containers/handleMediaQueries' 导入 handleMediaQueries从 './containers/setDislikes' 导入 setDislikes从 './NewSubscribers' 导入 NewSubscribers从 './CommentSection' 导入 CommentSection从 './UpNextVideos' 导入 UpNextVideos从'./DescriptionBox'导入DescriptionBox从 './VideoNotFound' 导入 VideoNotFoundimport { fetchVideoFromID, fetchPictureFromID } from '../../containers/api'从'../svgs'导入{拇指向上，拇指向下}进口 {缩写编号，大写第一个字母，randomDate } 来自'../../containers/helperFunctions'const VideoPage = () =>{const [p, setPrefix] = useState("videoPage")const [状态，设置状态] = useState({加载:真实，错误:假})useEffect(() => {如果(state.loading)extractDataFromUrl()否则 handleMediaQueries()}, [state.loading])const fetchVideo = async (id, picAuthorID) =>{让响应 = 等待 fetchVideoFromID(id)if (!response) setState(prevState => ({...prevState, error: true}))否则 mapVideoResponseToHTML(response.data.hits, picAuthorID)}const mapVideoResponseToHTML = (response, picAuthorID) =>{让 responseAsHtml = response.map(vid => {返回 {视频:<div className={`${p}-video-wrapper posRelative`} key={vid.id}><a className={`${p}-pixabay-src`} href={vid.pageURL}>?</a><视频海报="https://i.imgur.com/Us5ckqm.jpg"className={`${p}-视频可点击`}src={vid.videos.large.url}控制自动播放></视频><div className={`${p}-video-info-wrapper`}><div className={`${p}-video-title-box`}><h1 className={`${p}-video-title`}>{capitalizeFirstLetter(vid.tags)}</h1><span className={`${p}-video-views`}>{abbreviateNumber(Number(vid.downloads).toLocaleString())} 次观看</span><span className={`${p}-video-date`}>{randomDate()}</span>

<div className={`${p}-video-options`}><div className="thumbs"><div className={`${p}-video-options-thumbsUp`}>{thumbsUp(20)} &nbsp;<span className={`${p}-video-options-thumbsUp-text`}>{abbreviateNumber(vid.likes)}</span>

<div className={`${p}-video-options-thumbsDown`}>{thumbsDown(20)} &nbsp;<span className={`${p}-video-options-thumbsDown-text`}>{setDislikes(vid.likes)}</span>