Comments (7)
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} />
from web.
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>
<Link routeName="Contact">
Contact
</Link>
<h4> Landing </h4>
</div>
);
}
export default LandingScreen;
AboutScreen and ContactScreen are similar to LandingScreen.
from web.
@reactnewb Giving uriPrefix to navigator might help.
You can see my current working configuration link berow.
expo/web-examples#27 (comment)
from web.
@foloinfo, Thanks for the quick response.
You can see my current working configuration link berow.
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.
from web.
@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.
from web.
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.
from web.
@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'
from web.
Related Issues (20)
- goBack
- navigation.dispatch, Go Back Not working HOT 9
- onNavigationStateChange Props is missing HOT 1
- navigate params are not updating navigation.state.params HOT 3
- Web Auth Flow HOT 5
- add typescript definitions HOT 1
- how to define an index route? HOT 1
- chose between iOS or Android style for createStackNavigator or similar
- Option to disable setting the url and adding to the history (e.g. for modals) HOT 1
- Is this being supported HOT 3
- Non-required files are somehow being included (and called) in bundle
- navigation go back not working on web HOT 7
- query parameters from url not passed to route HOT 3
- pass function into Header or Custom Navigators in react native web? HOT 1
- Hide params from URL HOT 4
- Expo Web App in a Subdirectory Results in Wrong URL HOT 2
- Browser Back Button Not Working as execpted.
- react navigation in web HOT 7
- How can I prevent display: none being appended randomly on my screen by react-navigation ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web.