反应路由器更改链接但无法更改正文

Question

React router链接标签在第一页和第二页中也发生了变化，但在第二页有很多链接。如果我点击这个链接，它可以更改链接，但不能更改正文。我该如何修复它。。。路由器代码：

<Switch>
<Route exact strict path="/">
<Home />
</Route>
<Route exact strict path="/about/">
<About />
</Route>
<Route exact strict path="/channel/:title" component={withRouter(Dashboard)} />
</Switch>
</div>
</Router>

第二页代码

function Dashboard() {
const { title } = useParams();
return (
<div>
<Play 
title={title}
/>
</div>
);
}

通过道具传递一些数据

//this is <Play/> component code just showing here shortly
<Router>
<VideoPlayer
controls={true}
src={this.state.link}
poster={this.state.poster}
width={window.screen.width}
height={window.screen.height - (window.screen.width+100)}
/>
<Link to="/channel/Rtv">Rtv</Link>
</div>
</Router>

仅显示此代码的一小部分请帮帮我。。。如何修复错误

完整代码如下：https://gist.github.com/fahadali32/8643d33a2328c1375552e4ba7637fc92

Answer 1

withRouter的文档提到：

withRouter不订阅位置更改，就像React Redux的connect订阅状态更改一样。相反，在位置更改从<Router>组件传播出去后重新渲染。这意味着withRouter不会在路由转换时重新渲染，除非其父组件重新渲染。

这不是您想要的行为，因此不应该使用withRouter。所以你应该更换

<Route exact strict path="/channel/:title" component={withRouter(Dashboard)} />

带有

<Route exact strict path="/channel/:title" component={Dashboard} />

如果需要访问match、location或history，请使用相应的挂钩。您已经在使用useParams；如果需要，您也可以使用useLocation或useHistory。

Answer 2

好的，我只需添加就可以找到答案

<div key={this.props.link}>
<VideoPlayer controls={true} src={this.state.link} poster={this.state.poster} width={window.screen.width} height={window.screen.height - (window.screen.width+100)} />
</div>