Build a Link Component to Navigate to Routes in React

Share this video with your friends

Send Tweet

In this lesson, we’ll create a Link component that manipulates the browser’s address bar using the history API’s pushState method.

Brian Jensen
Brian Jensen
~ 7 years ago

The following link in the Link.js:

history.pushState(null, '', this.props.to)

results in a compile error in the latest version of react:

Failed to compile ./src/components/router/Link.js Line 6: Unexpected use of 'history' no-restricted-globals

Search for the keywords to learn more about each error.

Andy Van Slaars
Andy Van Slaars(instructor)
~ 7 years ago

Brian,

Thanks for pointing this out. This is a linting error caused by some updated lint config. You should be able to get everything working again by referencing history directly from window with window.history. You could also disable linting for that line by adding // eslint-disable-line to the end of the offending line.

Hope this helps.

Brian Jensen
Brian Jensen
~ 7 years ago

Yay it works. Thanks for the prompt response! :-)

Andy Van Slaars
Andy Van Slaars(instructor)
~ 7 years ago

Glad that cleared it up! :)

Developer Account
Developer Account
~ 7 years ago

Line 7: Unexpected use of 'history' no-restricted-globals

Matt Andryc
Matt Andryc
~ 7 years ago

+1

Matt Andryc
Matt Andryc
~ 7 years ago

@Dev change "history" to "window.history"; because you don't declare history, in strict mode, all vars must be declared first.

Lisa Hammarström
Lisa Hammarström
~ 7 years ago

Thanks Matt!

Lokesh Sanapalli
Lokesh Sanapalli
~ 6 years ago

The code in codesandbox is not working... kindly fix it...