1

I am using ReactJS in my project and I would like to access my current URL like by using window.location.href. When I use window.location.href I get an error saying window is not defined.

// --- REACT + CUSTOM-TAGS ---
const SampleApp = ({value}) => {
    // --- CUSTOM-SCRIPTS ---
    addMeta([
        {type: 'meta', content: {content: 'something'}},
        {type: 'link', content: {rel: 'http://link'}},
    ]);

    //Append the value from the URL
    const prId = "12512" //We can make it dynamic
    const url = window.location.href;//window,location.href;
    const id = url.substring(url.lastIndexOf('/') + 1);
    const output = id.replace(/[a-zA-Z=]/g, '');

    return (
        <div>
            <h1>Hello {value}</h1>
            <hr />
            <h2>{url} took from prId</h2>
            <hr />
            <h2><a className="redirect" href={'//www.check.com/prId/' + output} target="_blank">Click Here</a>
            </h2>
        </div>
    );
};
Sai c
  • 31
  • 1
  • 6
  • Check this http://stackoverflow.com/questions/35374257/error-window-not-defined-in-node-js seems like a similar problem – Shota May 03 '17 at 14:54

2 Answers2

0

The location is in the props, since window isn't defined in React.

Just do this.props.location.pathname instead of window.location.href.

More infos if you log the props.

Victor Baron
  • 177
  • 9
  • TypeError: Cannot read property 'props' of undefined at SampleApp (/Users/scrpatlolla/Desktop/Test/react-amp-template/examples/build/demo.js:41:24) at /Users/scrpatlolla/Desktop/Test/react-amp-template/node_modules/react-dom/lib/ReactCompositeComponent.js:306:16 at measureLifeCyclePerf (/Users/scrpatlolla/Desktop/Test/react-amp-template/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12) – Sai c May 03 '17 at 15:08
  • Please see the error. if I use this.props.location.pathname. – Sai c May 03 '17 at 15:08
  • Please see the full file https://github.com/scrpatlolla/react-amp-template/blob/master/examples/src/demo.js – Sai c May 03 '17 at 15:09
  • you have a pure component. the first parameter passed to a pure component is the props. – Gilbert Nwaiwu May 03 '17 at 15:22
  • you have to extract the location similar to how you extract value: `const SampleApp = ({ value, location }) = { ... }` – Hunter McMillen May 03 '17 at 15:23
  • My bad, read too fast and hadn't seen you had a pure component – Victor Baron May 03 '17 at 15:24
  • @hunter can you please extend this.. sorry I am new to react const SampleApp = ({ value, location }) = { ... } – Sai c May 03 '17 at 15:55
  • const SampleApp = ({ value, location }) => { // --- CUSTOM-SCRIPTS --- addMeta([ {type: 'meta', content: {content: 'something'}}, {type: 'link', content: {rel: 'http://link'}}, ]); //Append the value from the URL const prId = "12512" //We can make it dynamic const url = this.props.location.pathname; //window,location.href; const id = url.substring(url.lastIndexOf('/') + 1); const output = id.replace(/[a-zA-Z=]/g, ''); – Sai c May 03 '17 at 15:56
  • TypeError: Cannot read property 'props' of undefined at SampleApp (/Users/scrpatlolla/Desktop/Test/react-amp-template/examples/build/demo.js:44:24) – Sai c May 03 '17 at 15:57
  • You have already extracted `location`, so `this.props.location` doesn't exist. Use `location.pathname` instead. – Hunter McMillen May 03 '17 at 15:59
  • pathname is undefined – Sai c May 03 '17 at 17:35
0

Install this library npm install --save-dev --save-exact jsdom jsdom-global Then import it at the top of your component import 'jsdom-global/register'; Hope it helps.

Allan Mwesigwa
  • 1,210
  • 14
  • 13