CODEWITHSUNDEEP
javascriptreactjs
Jack The Baker
Jack The Baker

Reputation: 1883

Reactjs compontent not update

I use a component called New twice, one for /New another for /Edit because all input in this page should use for edit page so I decided to use this compontent again but set data with some condition.

Router

<Route exact path='/New' component={New}></Route>
<Route exact path='/Edit/:id' component={New}></Route>

There is no problem for using this component in both pages, but if user be in edit page, and click on navigation, see /New page with some values that belong to /Edit page, this mean page not updated correctly, navigation contains many <Link/> 

<Link to="/New"><Icon name="home"/>New Order</Link>

But if I use window.location.href = "/New" instead of <Link/>, or direct href it work fine:

<a href="/New"></a>

So any idea how can I solve this? I want to update page when I click <Link/>.

Upvotes: 0

Views: 65

Answers (1)

Pedram
Pedram

Reputation: 16575

If you are using condition inside componentDidMount; <Link/> just switch between component not reload and update component, and you are using one component for two different route there is a ! tricky way to avoid this issue:

<div onClick={() => window.location.reload()}><Link to="/New"><Icon name="home"/>New Order</Link></div>

Or/

<Link onClick={this.forceUpdate} to="/New"><Icon name="home"/>New Order</Link>

__ Or __

  1. Do not use same component for edit

  2. Force use window.location.href

Upvotes: 1

Related Questions