React-router: [v6] React Router does not work as global script

Created on 11 Jun 2020  路  2Comments  路  Source: ReactTraining/react-router

Version

6.0.0-alpha.5

Test Case

https://codesandbox.io/s/serene-fermat-tchxk?file=/public/index.html:1379-1705

Steps to reproduce

The sandbox shows a minimal, equivalent program with React Router @5.2.0, which is working.
Now, comment the v5 script tag under public/index.html and uncomment the v6 ones.

Script sources:
v5:

<script src="https://unpkg.com/[email protected]/umd/react-router-dom.min.js"></script>

v6:

<script src="https://unpkg.com/[email protected]/umd/react-router.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-router-dom.production.min.js"></script>

Expected Behavior

There is no error for v6, as with v5.

Actual Behavior

Error:

TypeError
t.useRef is not a function

I am not entirely sure about the cause, as useRef rather is React. I suspected it to be some kind of environment transpilation problem with Codesandbox. Though, I could reproduce an error outside Codesandbox as well.

Most helpful comment

I think react-router v6 requires hooks feature of React.

Hooks are a new addition in React 16.8 (https://reactjs.org/docs/hooks-intro.html)

I see your example in React 16.3.1 so that why it does not work.
Upgrade your React version. I upgraded React at your example to 16.13.1 and add

<script src="https://unpkg.com/[email protected]/umd/history.production.min.js"></script>

And it works: https://codesandbox.io/s/priceless-boyd-i8bxs?file=/public/index.html:0-2118

All 2 comments

I think react-router v6 requires hooks feature of React.

Hooks are a new addition in React 16.8 (https://reactjs.org/docs/hooks-intro.html)

I see your example in React 16.3.1 so that why it does not work.
Upgrade your React version. I upgraded React at your example to 16.13.1 and add

<script src="https://unpkg.com/[email protected]/umd/history.production.min.js"></script>

And it works: https://codesandbox.io/s/priceless-boyd-i8bxs?file=/public/index.html:0-2118

Yeah, don't know how I missed that when I first looked. It's the wrong version of React.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

winkler1 picture winkler1  路  3Comments

stnwk picture stnwk  路  3Comments

yormi picture yormi  路  3Comments

tomatau picture tomatau  路  3Comments

ackvf picture ackvf  路  3Comments