CODEWITHSUNDEEP
reactjshttp-redirectreact-routerrender
Himanshu Tariyal
Himanshu Tariyal

Reputation: 344

Component not rendering on redirecting to same page

I am working on a react app. So I have these components in my homepage

  1. Sidebar
  2. Sidebar Suggestions
  3. Tags
  4. Tags Suggestions

My Main Routing is like :

<Router>
    <Route path={["/", "/home", "/tags/:tagId"]} component ={Home}/>
</Router>

And my Home component is :

<Sidebar {some Props} />

  <Router>
    <Switch>
      <Route
         exact
         path={["/", "/home"]}
         render={(props) => (
           <Suggestions {some props} />
         )}
      />
      <Route exact path="/tags/:tagId" component={TagsSuggestion} />
    </Switch>
  </Router>

<Tags { some props}  />

So whenever I click on any data in Sidebar, I want Sidebar Suggestions to render

And Whenever I click on any tag in tags component, It will redirect to " /tags/:tagId " with the tag Id attached.

Problem : In the starting, the Sidebar suggestions are being shown ( which i want ), but whenever I click on tags, the Sidebar Suggestions component is not removed but the URL changes. And I have to reload the page manually to see the Tags Suggestions component.

Link for sandbox version : https://codesandbox.io/s/unruffled-wave-v9m3r?file=/src/Tags.js

Upvotes: 1

Views: 653

Answers (1)

Drew Reese
Drew Reese

Reputation: 202608

In order for the history.push to function as expected, it should be placed within the Router component. Just move Tags component into the Router so it has a router context to use.

class Home extends Component {
  render() {
    return (
      <div className="Home">
        <Sidebar />
        <Router>
          <Switch>
            <Route path="/tags/:id" component={TagsSuggestion} />
            <Route path="/" component={SidebarSuggestion} />
          </Switch>
          <Tags />
        </Router>
      </div>
    );
  }
}

Edit component-not-rendering-on-redirecting-to-same-page

Upvotes: 2

Related Questions