I have an application which searches for some items and on finding them opensup a react application in new window with some params that are item specific.Now once i have my react application opened up in new window.I want to pass those params in the url throughout my application.
I searched for it but nothing helped.
Here is an example of my scenario :
Url with which I am opening the react application :http://localhost:3000/dashboard?instrumentId=75064&username=XYZ&appleturl=http%3A%2F%2Flxsdfeat1.global.abcecorp.net%3A7950%2FrmsDPPortal%2Fresources%2Fsapplauncher.jar&dsfhosturl=http%3A%2F%2Flxbeat1.global.bcecorp.net%3A7950%2FrmsasdfPortal
I want everything after 'dashboard' to be part of all the urls in my application.so that i can extract url,usernames in all the pages and make api requests using them.
Note: I am using react router for routing purpose
I passed that common url in this way and it works for my use case.
browserHistory.push(
{
pathname : "/calsummary",
search : searchParams
});
//or
browserHistory.push(
{
pathname : "/calsummary",
search : location.search//location object is which is available on window object,window.location
});
Related
How to generate pages in gatsby that will allow you to add parameters to the routing like https://page1?someParam=param or https://page1/param
What I mean? When we navigate to page page1 in gatsby it work's fine, but what if I just want add uniq params for page for google analitics? so for this I want to have ability
add some additional params for the page from where I made redirect, but when I add
for page1 some params like https://page1?someParam=param or https://page1/param, it updated and show me just https://page1 instead.
I suppose that it's related to way how I created pages. Here is my code:
createPage({
path: `${localePrefix}/${slug}`, // so should I change it here in order to work as needed?
component: PageTemplate,
context: {
...context,
localizedPaths,
},
})
Can it be fixed with?
matchPath: path: ${localePrefix}/${slug}?*,
matchPath: path: ${localePrefix}/${slug}/*,
Recap:
My question is about why gatsby remove query params from pages?
https://some_site/some_page?some_param=323
translates into
https://some_site/some_page
https://page1?someParam=param or https://page1/param are not the same. While a query parameter (first case: ?someParam=param) is an optional value that doesn't change the rendered page (it doesn't point to any specific route hence it's not requesting any file). The second one (https://page1/param) is accessing a /pages/param route.
Since they are URL parameters, you don't need to change anything in your project, you just need to catch them using JavaScript. They are handled in thee:
const urlParams = new URLSearchParams(window?.location?.search);
Note: you can access directly location prop in Gatsby
If your project is replacing https://some_site/some_page?some_param=323 to https://some_site/some_page it's because some server-side configuration or a CDN, not because of Gatsby's behavior, like any other React project.
I'm using remix to serve my react application.
All my pages have dynamic slugs, therefore I need to find a way to resolve the following type of URL:
eg. mywebsite.com/dynamic_slug
If I create an $index.jsx file in the routes folder it works in that all the dynamic URLs resolve to that file, BUT, I can't seem to find a way to then read the slug in the compontent so that I serve the right data.
Many thanks to any responders.
You access the dynamic params via the params object passed to your loaders and actions.
// routes/$index.jsx
export async function loader({request, params, context}) {
const slug = params.index // whatever $name is
//...
}
https://remix.run/docs/en/v1/guides/data-loading#route-params
I'm trying to get my search bar working correctly.
When making a search, router sends me to /list/(whatever I searched for)
The searchbar is changing my route programmatically like so:
var pathname = '/list/';
var query = {
q: this.state.searchBar
};
hashHistory.push({pathname, query});
/list/:q has a componentDidMount function that sends a GET request to a database, but if I make a new search while allready on '/list/:q' the url gets updated but the component is not reloaded.
My problem:
How can I force my component to reload when making a new search while already on the search route /'list/:q'?
Relevant code:
Pastebin link
As Paul S suggested, using componentWillReceiveProps solved my problem.
Hopefully this is a very simple question:
I want to create a string containing the full URL to a page on my site, like:
https://example.com/documents/1
Ideally I'd like to generate this in a react-redux connect()-ed container, in mapStateToProps(). Where the page is a grandchild of a react-router Route using browserHistory (so maybe I can get it from react-router or browserHistory somehow?) If necessary I'd do it in a full-on React class.
But I can't for the life of me find out how to do this. window (as in window.location) is always undefined in mapStateToProps() (no big surprise there) and in my view components' render() function.
So far I have only found ways to access the current route, e.g. "/documents/1", which is only a relative path and does not contain the site base url (https://example.com/)
So firstly, remember your code runs on client and server so any access to window needs to be wrapped in a check.
if (typeof window !== 'undefined') {
var path = location.protocol + '//' + location.host + '/someting'; // (or whatever)
} else {
// work out what you want to do server-side...
}
If the URL you generate shows in the DOM, and on the client you populate the store with this URL before the first render, you're going to get a checksum error. If you really want to avoid the error you can wait until componentDidMount() in your root component to get/set the url.
After componentDidMount you can have direct access to the origin location so that you can get the root url.
I use the below code in my JSX all the time so that i dont have to worry about the root path ex: dev env this would be localhost:3000/whatever, staging this will be AppStaging.heroku/whatever/..... and in production it would evaluate to www.myapp.com/whatever
`${window.location.origin.toString()}/whateverRoute/`
You Can try!!
window.location.origin
you can try the URL API. Take a look at this link for more details https://developer.mozilla.org/en-US/docs/Web/API/URL
const url = new URL("blob:https://mozilla.org:443/")
console.log(url.origin);
// Logs 'https://mozilla.org'
I am new to backbone.js, pardon me if the question seems silly.
I am routing to other pages using :
this.options.app.navigate( myNewURL, true);
this myNewURL gets appended to the current URL in the window but before doing that i want to make some checks on it.How do i fetch the current url and then append the newUrl to it and redirect?
eg:
current url : abc.com/firstString/SecondString
on navigation i want : abc.com/SecongString/myNewUrl
this firstString might or might not exist, so i have to make a check for it and remove it before redirection.
How can that be done?
The way I prefer navigation in Backbone.
Backbone.history.navigate('myNewUrl',{trigger:true}); //This will fire the router
Make trigger false to just change the route, but not execute the router.
In order to get the current url, you can use
Backbone.history.fragment();
References :
http://backbonejs.org/docs/backbone.html