React Router 更改链接但无法更改正文答案

【问题标题】：React Router change the link but can't changed the bodyReact Router 更改链接但无法更改正文
【发布时间】：2021-09-01 10:32:00
【问题描述】：

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


            <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>
 );
}

通过 props 传递一些数据

//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

【问题讨论】：

您可能需要发布一个完整的示例（例如 GitHub 存储库或 gist），因为您显示的代码看起来还不错。还要检查 JavaScript 控制台中的错误消息，这些消息可能会揭示出问题所在。
好的，我会做的，请帮帮我...
gist.github.com/fahadali32/8643d33a2328c1375552e4ba7637fc92
请检查一下...

标签： reactjs react-router react-router-component

【解决方案1】：

withRouter's documentation 提及：

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。

【讨论】：

好的，但同样的问题......它不能改变身体......
你能试试<Route exact strict path="/channel/:title"><Dashboard/></Route>吗？
是但结果相同
如果你不介意，请提出一个要点，以便我能得到错误......请:)

【解决方案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>

【讨论】：