Re-Render Same Component on Url Change in React

Re-render same component on url change in react

In React Router v4 Adding a Switch tag after Router fixes the problem

On url change I want to re render my component how should I do that

I was facing similar issue sometime back when I was working on a react project.

You need to use componentWillReceiveProps function in your component.

  componentWillReceiveProps(nextProps){
     //call your api and update state with new props
  }

UPDATE

For react version 16.3+ please use componentDidUpdate

componentDidUpdate (prevProps, prevState) {
  // update state 
}

To make it more clear when your component loads for the first time by calling url www.example.com/content/a componentDidMount() is run.

Now when you click another link say www.example.com/content/b same component is called but this time prop changes and you can access this new prop under componentWillReceiveProps(nextProps) which you can use to call api and get new data.

Now you can keep a common function say initializeComponent() and call it from componentDidMount() and componentWillReceiveProps()

Your router would look something like this:-

ReactDOM.render((
     <Router history={browserHistory}>
      <Route path="/content" component={app}>
        <IndexRoute component={home}/>
        <Route path="/content/:slug" component={component_name} />
      </Route>
    </Router>
), document.getElementById('app'));

So now when you call www.example.com/content/a, a would be taken as slug. Within that component if you call www.example.com/content/b , b would be taken as slug and would be available as nextProps parameter in componentWillReceiveProps.

Hope it helps!!

How to re-render component on url change

Are you sure that the match object changes, or just some of its properties?

Besides that, your try...catch block is useless. There can never be an error in this code that it would catch.

const runEffect = async () => {...} may throw an syntax error, but no runtime error that try..catch can handle. And runEffect() can return a rejected Promise, but your try..catch won't deal with that either. unless you await runEffect().

And I find it pointless to re-throw new Error(error); inside a Promise chain, all this will get you is a Uncaught (in promise) ... error entry in the console.

I tried, however, substitute "[match]" with "[match.url]" in the useEffect and nothing changed.

sry, I don't know about that; maybe it's a bit too late over here. But ultimately you only care about the id-param, don't you?

I'd write it like this:

// you can put these outside the component itself as 
// they don't rely on anything but the passed arguments:
const getGroup = async (_id) => {
  const response = await api.get("/groupidindex", {
    params: {
      _id
    }
  });

  return response.data;
}

const logError = error => {
  console.error(error) 
};

// in the component
useEffect(() => {
  getGroup(match.params.id).then(setGroup).catch(logError);
}, [match.params.id])

Now, concerning the try...catch, I used it there because of a warning message in the application's backend. The message was: "UnhandledPromiseRejectionWarning: Unhandled promise rejection.

If you don't care about the error and just don't want the error-message, you can .catch() the error with a function noop(){}.

React router link is not re-rendering component

You didn't share the file where routes are, but if I understand when you change from /profile/1 to /profile/2 the component is not remounted. Maybe, you need using key atribute with param ID used in the route path to achieve that:

<PrivateRoute
  exact
  path='/profile/:user_id'
  component={(props) => (
    <ProfilePage
      {...props}
      key={props.match.params.user_id}
    />
  )}
/>

When you change url directly from /profile/1 to /profile/2 the current route keeps the same, then component is not remounted. If you add the key attribute to your Route, ReactJs listens to key changes and force the remounting when they happen, in your case, when user_id changes from 1 to 2.

React Router not rerendering same <Link> component on props

Base on your code, the component will not re-render since you are not change the state which its trigger any re-render event for react life-cycle...

So, I prefer to change your code from location state to URL param, since base on your logic here, this what you needed, for example:

    <Switch>
      <Route path="/" exact component={Main}/>
      <Route path="/FAQ/:slug?" component={Faq}/>
    </Switch>

and in your Faq Component:

let { slug } = useParams();

now, when you click on Link:

<Link to="/Faq/about" ><li className="...">About</li></Link>

or

<Link to="/Faq" ><li className="...">Faq</li></Link>

re-render will trigger, since theirs a state is changed...

Note: :slug? we add a question mark here to make it optional...so you can send about or not.

Note 2: if you need to re-render base on state, simply you can add hook and lesion to location.state and trigger update manually on useState or by any action you like...like add a key props thats contain location.state.myKey value

---

Related Topics