Opening DeepLinks which are not specified in Routes in react-native - javascript

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

Related

Svelte Sapper detecting route change

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

How to make path for pages in NextJS case insensitive

I have a file under the pages folder named about.tsx. So the path for the page is /about and I'm able to access the page by visiting example.com/about. However, if I visit example.com/About, it will redirect to a 404 page.
I've checked the Nextjs repo, seems like this is the expected behavior. Therefore, is there a workaround that can make the path case insensitive so that example.com/About will also work and direct users to the /about page?
With using next v12
There are a lot of similar questions here that has this answer already. I'd like to note that this answer is handling redirecting with the url parameters by adding this after the pathname:
${request.nextUrl.search}
Add a new file in /pages named _middleware.ts
import { NextRequest, NextResponse } from "next/server";
export function middleware(request: NextRequest) {
if (request.nextUrl.pathname === request.nextUrl.pathname.toLocaleLowerCase())
return NextResponse.next();
return NextResponse.redirect(`${request.nextUrl.origin}${request.nextUrl.pathname.toLocaleLowerCase()}${request.nextUrl.search}`);
}
I agree that's Next.js's behavior, they only handle exact page name about instead of both about & About using the same file page/about.tsx
But the solution is you keep implementing a main page (e.g: about.tsx) and setup other pages to redirect to that page (e.g: About -> about) following this guide https://nextjs.org/docs/api-reference/next.config.js/redirects
// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/About',
destination: '/about',
permanent: true,
},
]
},
}
// Set permanent:true for 301 redirect & clean SEO!

Lag when Redirecting from Default route to another route

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.

React Router with Meteor: How to remove code param from URL after redirect from OAuth without reload

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)

App does not render when using browserHistory instead of hashHistory in React Router

I am using React Router in my current project:
const store = Redux.createStore(bomlerApp);
const App = React.createClass({
render() {
return (
React.createElement('div', null,
this.props.children
)
)
}
})
var rootElement =
React.createElement(ReactRedux.Provider, {store: store},
React.createElement(ReactRouter.Router, {history: ReactRouter.browserHistory},
React.createElement(ReactRouter.Route, { path: '/', component: App },
React.createElement(ReactRouter.IndexRoute, { component: Home })
)
)
)
ReactDOM.render(rootElement, document.getElementById('react-app'));
This does not work. The app does not render at all and I don't get any error messages.
However, if I use ReactRouter.hashHistory instead, the app works.
What am I not understanding here?
Server Configuration: the browser history setup can generate real
looking urLs without reloading the page. But what happens if the user
refreshes or bookmarks on a deep nested urL? these urLs are
dynamically generated at the browser; they do not correspond to real
paths on the server, and since any urL will always hit the server on
the first request, it will likely return a page not Found error.
To implement the browser history setup, you need to import the
createBrowserHistory method from the History library. You can then
invoke it, passing the generated browser history configuration as the
history prop of the Router component
***> to work with browser history setup, you need to make rewrite
configurations on your server, so when the user hits /some-path on the
browser, the server will serve index page from where react router will
render the right view.***

Categories