frontarm / navi

🧭 Declarative, asynchronous routing for React.
https://frontarm.com/navi/
MIT License
2.07k stars 71 forks source link

navicontext hook useNavigation navigation.navigate bugs #155

Closed beckend closed 4 years ago

beckend commented 4 years ago
import * as React from 'react'
import { useNavigation } from 'react-navi'

const MyComponent: React.FunctionComponent = () => {
  const navigation = useNavigation()

  navigation.navigate('https://google.com')

  return null
}

Result:

https://localhost:3334/https://google.com

Also tried to pass option { replace: true } as second argument, no go.

Also another note: codesplitting react navi on a CDN and navigating with this function normally (such as '/about') will result in this exactly = https://github.com/react-navigation/web/issues/27

beckend commented 4 years ago

CDN result:

vendors~main-2194d0d887eb3febc7dd.js:1 Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'https://cdn.example.com/about' cannot be created in a document with origin 'https://mysite.com' and URL 'https://mysite.com/'.
    at https://cdn.example.com/vendors~main-2194d0d887eb3febc7dd.js:1:123733
    at Object.confirmTransitionTo (https://cdn.example.com/vendors~main-2194d0d887eb3febc7dd.js:1:121515)
    at Object.push (https://cdn.example.com/vendors~main-2194d0d887eb3febc7dd.js:1:123644)
    at e.navigate (https://cdn.example.com/vendors~main-2194d0d887eb3febc7dd.js:1:116263)
    at https://cdn.example.com/6-20ec92288b55a133975a.js:1:1967
    at Object.v (https://cdn.example.com/vendors~main-2194d0d887eb3febc7dd.js:1:547152)
    at w (https://cdn.example.com/vendors~main-2194d0d887eb3febc7dd.js:1:547295)
    at https://cdn.example.com/vendors~main-2194d0d887eb3febc7dd.js:1:547441
    at O (https://cdn.example.com/vendors~main-2194d0d887eb3febc7dd.js:1:547527)
    at A (https://cdn.example.com/vendors~main-2194d0d887eb3febc7dd.js:1:547953)

note: CDN and personal site URLs was replaced.

jamesknelson commented 4 years ago

I'm not sure it makes sense to call navigate on a different domain - navigate uses pushState internally, but pushState is only designed to work within the same domain.

To use Navi (or any other pushState based router), you really need to have all your URLs on the same domain. You can put scripts and assets on a CDN, but the HTML needs to be in one place.