React Router 更改 link 但无法更改正文

Question

React router Link 标签 wokred 在第一页和页面也改变了但是在第二页有很多 link 如果我点击这个 link 它可以改变 link 但不是正文我该如何修复它... 路由器代码：


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

第2页代码

   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

Answer 1

withRouter's documentation 提及：

withRouter does not subscribe to location changes like React Redux’s connect does for state changes. Instead, re-renders after location changes propagate out from the <Router> component. This means that withRouter does not re-render on route transitions unless its parent component re-renders.

这不是您想要的行为，因此您不应使用 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>

React Router 更改 link 但无法更改正文

React Router change the link but can't changed the body

reactjs

react-router

react-router-component