I have an app written in svelte with sapper, where I have several routes created in a Next/Sapper way as separate files in routes folder. How can I detect the route change and where, I need to close navigation on mobile after user selects the route, however nothing is logged to the console unless page is refreshed.
<script>
import CartWidget from '../shared/CartWidget.svelte'
import { onMount } from 'svelte'
onMount(() => {
let path = window.location.pathname
console.log(path)
})
export let segment = '';
</script>
Thanks for advices
Related
I have a React app that is using an iFrame to render another app that was made in flutter (see the first image):
The flutter app is hosted in a certain domain (so it's like a micro frontend). The app in React is the dashboard and is hosted somewhere else (different than the flutter app)
My problem is that when testing the flutter app directly in the hosted URL, it works as expected. When you click on the name of one person, a sidebar opens with some information and a button "Gestion oferta".
When you click on the button, it should take you to this other view:
So this works as expected if I test the flutter app directly in the URL where it is hosted, but when I click on that button inside the react dashboard, it does not behave as expected, it just shows another instance of the same react app (dashboard) inside the iFrame, like this:
Here is my code for this component in the react app that renders the iFrame, in which I call the URL for the flutter app:
import { Fragment } from "react";
import { css } from '#emotion/react'
import Head from "next/head";
import DashboardLayout from "../../../layouts/DashboardLayout";
import { getTenantByCompanySiap } from "../../../helpers/tentant";
import { UAT, PROD, getEnv } from "../../../helpers/env";
export { getSSProps as getServerSideProps } from '../../../lib/Page'
export default function NuevaSolicitudPage(props) {
const tenant = getTenantByCompanySiap(props.infoRh?.codeCompanySIAP)
const branch = props.infoRh?.codeBranch
const user = props.employeeData?.email
const getCampanas = () => {
const env = getEnv();
const url = {
[UAT]: `https://url-for-testing`,
[PROD]: `https://other-url-for-production`
};
return url[env] || url[UAT];
};
const url = getCampanas()
return (
<Fragment>
<Head>
<title>Gestión de cartera | Campañas</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<DashboardLayout
{...props}
title="Campanas"
>
<iframe
src={url}
css={css`
width: 100%;
height: 100%;
`}
frameBorder="0"
/>
</DashboardLayout>
</Fragment>
);
}
I do not have access to the flutter app code, I only consume it and show it in the iFrame, but I heard from someone that I need to configure some files in order to display flutter apps in an iFrame in react, but he is also not sure. I have searched for something like this but could not find anything relevant to this problem because the app is showing, it just does not behave as expected.
Can somebody give me an advice on how to solve this issue? Thanks in advance.
This issue had to do with the cookies, somehow the cookie to store the user session got lost/erased, so whenever you have something similar and you use cookies for user sessions, check if they are stored and used properly.
I'm new to React Router and I'm working on the best way to route to react router.
What am I trying to achieve:
I just want the default route to navigate to /:tenantName/media_management/dashboard instead of /:tenantName/media_management when the Media Management tab is clicked.
Issue:
I'm explicitly checking if the route is initial route and then re-routing to /dashboard. This works but it's
very slow. I can notice the apparent lag when I click on
Media-management Tab.
Wanted to know if there is a better way of handling default route?
Router.js
import { Route, Redirect, Switch, useHistory } from 'react-router-dom';
const AsyncMediaManagement = lazy(() => import('#src/features/media-management/'));
<Route
path="/:tenantName/media_management"
component={withMainLayout(AsyncMediaManagement, 'MediaManagement')}
/>
Media-management.js:
if (contentTypeSelected === '') {
props.history.push(`/:tenantName/media_management/dashboard`);
}
Please help, I'm very new to react router and any help would be very much appreciated.
Try adding exact=true to your Routes
Can we see some more of your 's - do you have the default dashboard route above or below the one you have shown?
RR will match the first route that it finds if you don't add an exact=true prop to the route.
If i consider an example
https://app.abc.com/login
this opens login page in my app. But if the link is like
https://app.abc.com/loginUser //This link is a route in web app
this doesn't open the login page in App because the Path is not defined in routes
Now the requirement is, whenever a user clicks on Second link, even then it should open login component in App and not in web. ie. multiple routes for same component, or can i open a generic component for such routes? Can we achieve this in React-Native?
This was pretty simple, just had to explore documentation of React-Navigation
import { NavigationActions } from 'react-navigation'
const previousGetActionForPathAndParams = MyAPP.router.getActionForPathAndParams;
Object.assign(MyApp.router, {
getActionForPathAndParams(path) {
console.log("path in navigation", path)
if (
path === 'loginUser'
) {
// returns a profile navigate action for /my/custom/path
return NavigationActions.navigate({
routeName: 'Login',
});
}
// else {
// console.log("you have landed in an unknown space")
// }
return previousGetActionForPathAndParams(path);
},
});
Insert this code in your navigation file and you are good to go with React-Navigation
In previous versions, we could do that by giving multiple paths to a specific component as per here
Thanks to #DoğancanArabacı for a valuable comment, that once used to be a handy solution
I'm. using React Router and React on a Meteor App.
I use OAuth and after the OAuth call to another site, that site redirects to my URL with the code. e.g. http://localhost:3000/?code=lsK1o0FI8AV0WEVfxhEXiyjZL32we2&state=None
I then read code and use it in my application. After getting the code though I would like to remove the code from the URL to hide it from the user.
How can I do that with React Router or Javascript without reloading?
You need to bind history from react router. Then you need to extract param code from current pathname. If code exists you use the code and replace the url wich you need (for example /). This is possible implementation:
import {withRouter} from 'react-router-dom'
const App = ({
history,
}) => {
const code = new URLSearchParams(
new URL(history.pathname).search
).get('code')
if(code) {
useCode(code)
history.replace('/')
}
return (
<div>...</div>
)
}
export default withRouter(App)
Is there any way to extend react-router of one application which is already hosted on fly? I want to inject additional routes on the click of a link which allows me to inject the script or allows to include my javascript.
Eventually I am looking for two different react applications which has one build and deployment cycle, but interrelated to each other.
Ex. there is the abc.com in which on click of a link(i.e. abc.com/nepage) the entire page is getting reloaded with same content [i.e. say header footer] which is maintained by different team all to gather and they have there one build and deployment cycle.
I want the application to be with SPA even if we have different build and deployment process.
This was achieved using Backbone with help of Backbone.Router.extend, where on click of link the default router for the new page was overridden with all new set of routers and which use to full the supporting files from the path mentioned for the specific router's
With PlainRoutes, child routes can be loaded on-demand (when the user enters the route) and resolved asynchronously. Having that in mind, you can use Webpack chunks to split the code corresponding to theses routes in diferente files. Going even further, you can have multiple entrypoints on Webpack, making users load only the part of the application that affects the current page.
Sample app:
index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import { Router, browserHistory } from 'react-router'
const App = ({ children }) => {
<div>
<nav>Your navigation header</nav>
{ children }
<footer>Your app footer</footer>
</div>
}
const HomePage = () => <p>Welcome!</p>
const routes = {
path: '/',
component: App,
indexRoute: { component: HomePage },
getChildRoutes (partialNextState, cb) {
require.ensure([], (require) => {
cb(null, [
require('./routes/about'),
require('./routes/blog'),
require('./routes/contact'),
])
})
}
}
ReactDOM.render(
<Router history={ browserHistory } routes={ routes } />,
document.getElementById('container')
)
routes/about.js:
import React from 'react'
const About = () => <p>About page</p>
export default {
path: 'about',
component: About
}
Other routes could be similar to the about route as shown above.