Uncaught DOMException: Failed to execute 'pushState' on 'History'

[foloinfo]

Hi, I'm trying to use createBrowserApp with latest preview for expo's web support.
Navigation itself works fine, but URL is not updated when navigation happens.

here is the error

Uncaught DOMException: Failed to execute 'pushState' on 'History':
 A history state object with URL 'http://groups/someuid' cannot be created in a
 document with origin 'http://localhost:19006' and URL 'http://localhost:19006/'.

What I'm trying to do is to navigate from / to /groups/someuid. Page will change, but URL stays same.
Also when I visit /groups/someuid it always renders /, so deeplink is not working.
I'm using nested navigators by the way.

FYI:
My current workaround is to actually use createAppContainer instead of createBrowserApp, and manually rewrite URL.

navigation.navigate('Group', { id: id })
window.history.pushState({}, null, `/groups/${id}`)

Since there is a minor bug on using createAppContainer, but setting up prefix solves deeplink issue, and it works fine, but I want to know if there is a better solution for this.
ref: Deeplink with react-navigation will fail due to prefix returned by expo Linking · Issue #27 · expo/web-examples

[reactnewb]

I'm experimenting with createBrowserApp and also getting the similar error.

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://about/' cannot be created in a document with origin 'http://localhost:3000' and URL 'http://localhost:3000/'.

I'm using it as follow.

App.js

//App.js

import React, { Component } from 'react';
import { createSwitchNavigator } from "@react-navigation/core";
import { createBrowserApp } from "@react-navigation/web";

import LandingScreen from './LandingScreen';
import AboutScreen from './AboutScreen';
import ContactScreen from './ContactScreen';


const RouteConfigs = {
  Landing: {
    screen: LandingScreen,
    path: '/'
  },
  About: {
    screen: AboutScreen,
    path: '/about'
  },
  Contact: {
    screen: ContactScreen,
    path: '/contact'
  }
}

const SwitchNavigatorConfig = {
  'initialRouteName': 'Landing',
}

const MyNavigator = createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);
const App = createBrowserApp(MyNavigator);


export default App

LandingScreen.js

//LandingScreen.js
import React, { Component } from 'react';
import { Link } from "@react-navigation/web";

const LandingScreen = () => {
  return (
    <div>
      <Link routeName="About">
        About
      </Link>
      &nbsp;
      <Link routeName="Contact">
        Contact
      </Link>
      <h4> Landing </h4>
    </div>

  );
}

export default LandingScreen;

AboutScreen and ContactScreen are similar to LandingScreen.

[foloinfo]

@reactnewb Giving uriPrefix to navigator might help.
You can see my current working configuration link berow.

expo/web-examples#27 (comment)

[reactnewb]

@foloinfo, Thanks for the quick response.

You can see my current working configuration link berow.

expo/web-examples#27 (comment)

The workaround that you suggested that made me install expo package and then later react-native package. And after installing react-native everything suddenly stop working.

I'm wondering that is it possible to use react-navigation without those other dependency?!!

react-navigation's APIs are way more intuitive and simpler than other available routing options. So want to use it as a routing for SPA.

Thanks.

[foloinfo]

@reactnewb If you are not using this for native app, then you don't need to use react-native or expo. (sorry I didn't notice you were using div)

Maybe try setting uriPrefix='http://localhost:3000'
or something similar (wherever your local env) might solve.

[reactnewb]

Hi @foloinfo,

Setting uriPrefix to 'http://localhost:3000' works for non-root URL. I can navigate to about and contact screen. But I get the following error when I try to navigate back to landing screen.

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http:' cannot be created in a document with origin 'http://localhost:3000' and URL 'http://localhost:3000/about'.

Thanks.

[foloinfo]

@reactnewb You might fix it through setting path to '' not / for Landing.

Also I'm not sure if Link component is working correctly, so maybe try setting window.location directly might work.

added: I'm kind of 'guessing' from my experience, so don't trust what I write too much.

added2:
try setting below too.

  initialRouteName: 'Landing',
  backBehavior: 'history'

[reactnewb]

Hi @foloinfo,

I've updated my Landing path to '' from '/' and it worked. (I already had 'backBehavior': 'history' option in my config.)

Many Thanks. 🙌

---

For future reference:
This is how I'm using react-navigation outside of react-native.

import React from 'react';
import { createSwitchNavigator } from "@react-navigation/core";
import { createBrowserApp } from "@react-navigation/web";


import LandingScreen from './LandingScreen';
import AboutScreen from './AboutScreen';
import ContactScreen from './ContactScreen';

const prefix = 'http://localhost:3000/'
const RouteConfigs = {
  Landing: {
    screen: LandingScreen,
    path: ''
  },
  About: {
    screen: AboutScreen,
    path: 'about'
  },
  Contact: {
    screen: ContactScreen,
    path: 'contact'
  }
}

const SwitchNavigatorConfig = {
  'initialRouteName': 'Landing',
  'backBehavior': 'history'
}

const MyNavigator = createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);
const App = createBrowserApp(MyNavigator);

export default () => <App uriPrefix={prefix} />