0

I have a simple demo react app that uses react-router-dom (5.2) to show one of 3 "pages".

The app is included on a page that has a button:

index.html:

<button data-app-button data-sku='woo-beanie'>Click Me</button>

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

document.addEventListener('click', function (event) {    
    if (event.target.closest('button[data-app-button]')) {
      // send instructions to react
    }
});

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

I want to be able to navigate to a page in the react site, passing through the buttons data-attributes. How is this done with react and react-router ?

UPDATE

@Doppoio's solution works - as long as I'm on a different "page" in my react app. However I have a route like this:

  <Route
    path="/tryon/:id/:product_sku?">
  </Route>

If I start in app from a route of say /faqs and my external button navigates to /tryon/242/jumper-23 my component is awar of the product_sku property.

However when I'm on a page in app of /tryon/242 and then i click an external button to navigate to /tryon/242/jumper-23 the component should be aware of the jumper-23 optional parameter. Currently it isn't.

How do i make the Tryon component detect the change in url of just the optional parameter?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Will
  • 4,498
  • 2
  • 38
  • 65

1 Answers1

1

Somewhere in your code under Router, you can add history to window object. And call it from there.

const SomeComponentInsideRouter = () => {
  const history = useHistory();
  useEffect(() => {
    window.reactHistory = history; // Add reference to history via window object.
  }, []);
  return null;
};

And call it via window.reactHistory

document.addEventListener("click", function (event) {
  if (event.target.closest("button[data-app-button]")) {
    // send instructions to react
    window.reactHistory.push("/about");
  }
});

Here's sandbox link https://codesandbox.io/s/happy-ganguly-b0u2o?file=/src/index.js

Update to mention changed props:

Changes to the props can be detected using componentDidUpdate

https://reactjs.org/docs/react-component.html#componentdidupdate

Will
  • 4,498
  • 2
  • 38
  • 65
Doppio
  • 2,018
  • 12
  • 11
  • thanks. So the history is just a way in to the url pushed? If I needed to pass parameters from the buttons data-attributes, I put them in the path pushed to the history? How are they then accessed? – Will Dec 17 '20 at 15:57
  • Pretty much, yup. react-router can read url parameter or query parameter. fly away. – Doppio Dec 17 '20 at 16:52
  • I implemented this, and it works great. However, if im trying to navigate to the same url in the react app, but with an optional property it does not register the change. I have to be on a different page in the app so that when it navigates it renders the component. Any ideas? – Will Mar 11 '21 at 19:16
  • By optional property you mean query parameter like `/about?page=1` ? – Doppio Mar 12 '21 at 07:46
  • no, I have updated the question with some more details. – Will Mar 12 '21 at 10:11
  • I updated your answer to mention the props, using componentdidupdate, which is probably general react knowledge but was the missing bit of the puzzle for me. thanks for your help. – Will Mar 12 '21 at 16:09
  • I think you might have stuck on to the new problem of reloading same route. Maybe this will have some idea for solution. https://stackoverflow.com/questions/47602091/how-to-use-react-router-4-0-to-refresh-current-route-not-reload-the-whole-page – Doppio Mar 13 '21 at 04:11