Question

第一页和页面中的 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

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

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>

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

2 个答案: