1

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


            <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

4

2 回答 2

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

如果您需要访问matchorlocation或history，请使用相应的钩子。您已经在使用useParams; 你也可以使用useLocation或者useHistory如果你需要它们。

于 2021-06-16T16:01:28.860 回答
0

好的，我只需简单地添加即可找到答案

<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>
于 2021-07-04T17:06:21.417 回答