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

Question

React router Link tag wokred in the first page and page also changed but in the 2nd page have many link If i click on this link it can changed the link but not body how can i fix it... Router code :


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

2nd page code

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

Passing some data via 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>

just showing a little part of this code... please help me ...how can i fix the error

Full code is here: https://gist.github.com/fahadali32/8643d33a2328c1375552e4ba7637fc92

You'll probably need to post a complete example (e.g. a GitHub repo or gist), as the code you show looks just fine. Also check the JavaScript console for error messages which might reveal what's going wrong. — edemaine, Jun 16 '21 at 15:26
https://gist.github.com/fahadali32/8643d33a2328c1375552e4ba7637fc92 — Fahad Ali, Jun 16 '21 at 15:54

score 1 · Answer 1 · answered Jun 16 '21 at 16:01

1

withRouter's documentation mentions:

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.

This is not the behavior you want, so you shouldn't use withRouter. So you should replace the line

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

with

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

If you need to access match or location or history, use the corresponding hook. You're already using useParams; you could also use useLocation or useHistory if you need them.

answered Jun 16 '21 at 16:01

edemaine

2,699
11
20

Ok done this but same problem ...it can't changed the body... – Fahad Ali Jun 16 '21 at 16:04
Can you try``? – edemaine Jun 16 '21 at 16:13
Yes but same result – Fahad Ali Jun 16 '21 at 16:20
if u don't mind please make a gist so that i can get the error ...please :) – Fahad Ali Jun 16 '21 at 16:22

score 0 · Accepted Answer · answered Jul 04 '21 at 17:06

0

Ok i find the answer just simply add

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

answered Jul 04 '21 at 17:06

Fahad Ali

47
1
7

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

2 Answers2