Get the route path with special character and dynamic variable in react - javascript

The path provided in the react router component is not working as expected.
e.g: path: "/route?name=/:name/&course=/:course/"
Dynamic variable in the URL: /:name/ and /:course/

name and course are query params and should not be specified in Route.
You can simply have your component Route like
path= "/route"
and detect query params changes as mentioned in the following post
Detect change in query param react-router-dom v4.x and re-render component
or you could design your route to make name and course and path params and have your Route like
path: "/route/:name/:course/"

Related

error while using params in the router.push function vue-router 4

hello guys i'm new to vue js and i'm trying to pass paramenters to a specific router this should happen when i click on a card research and then it will redirect to the research details component called actions-log but when i call this router via
this.$router.push({ name: "actions-log", params: { Id: "3" } })
it gives me an error in the console says:
Uncaught (in promise) Error: No match for {"name":"3","params":{}}
so can any one help me with that error please......
You can use path
const routeId = 3
this.$router.push({ path: `/actions-log/${routeId}` })
i figured out what's happening i have a component called pageTitle this component is included by every other component i use it to make the breadcrumb using the:
this.$route.fullPath
then spliting it and looping the values with :
<li><router-link></router-link></li>
to make the breadcrumbs links but the fullPath prop of the vue router it returns the params too so through the loop in:
<router-link :to="{ name: {path} }">{{ path }}</router-link>
vue checks if the router is exists with the given name, for example when i put /actions-log/3 as params int the url it will be set in the :to attribute becuase of this behavios it's launch that exception;
so i think i solved the problems in the following computed fuction :
i don't know if someone has a better idea to create a breadCrumbs in vue...
anyway thank you so much for helping me to resolve this problem.

How to reuse route on query params change, but not on path params change in Angular?

Say I have 2 routes '/users' and /users/:id. First one renders UserListComponent and second UserViewComponent.
I want to re-render component when navigating from /users/1 to /users/2. And of course if I navigate from /users to /users/1 and vice versa.
But I DON'T want to re-render component if I navigate from /users/1?tab=contacts to /users/1?tab=accounts.
Is there a way to configure router like this for entire application?
--
Update:
I'm importing RouterModule in AppRoutingModule like this:
RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })
I'm using Angular 12
The default behavior of the Angular router is to preserve the current component when the URL matches the current route.
This behavior can be changed by using the onSameUrlNavigation option:
Define what the router should do if it receives a navigation request
to the current URL. Default is ignore, which causes the router ignores
the navigation. This can disable features such as a "refresh" button.
Use this option to configure the behavior when navigating to the
current URL. Default is 'ignore'.
Unfortunately, this option is not fine-grained enough to allow reload for path params and ignore for query params.
So you have to subscribe both to the query params and the path params changes with something like this:
constructor(route: ActivatedRoute) { }
ngOnInit() {
this.renderLogic();
this.route.params.subscribe(() => this.renderLogic());
this.route.queryParams.subscribe(() => this.renderLogic());
}
renderLogic() {
// ...
}
As far as I know, #Guerric P is correct, you can't completely re-render the component selectively like this, at least not without some trickery like subscribing to each event and then possibly blocking it for one scenario and not the other. Feel free to try something like that, but below is an alternative if you make use of resolvers to fetch your data.
What you can do is use runGuardsAndResolvers in your route configuration like so:
const routes = [{
path: 'team/:id',
component: Team,
children: [{
path: 'user/:name',
component: User
}],
runGuardsAndResolvers: 'pathParamsChange',
resolvers: {...},
canActivate: [...]
}]
This will, as the name suggests, run your guard resolver logic again. If you fetch data using resolvers and pass it into your components, you can update what your component displays only when the path or params change.

How do I pass data to another component using Vue router?

Currently, I have a component that is rendered on the page, when I console log the this.$router variable inside the component, i see the full path property is equal to '/hello/reports?report=3849534583957' and the path property is equal to just '/hello/reports/'.
In a separate component I am trying to pass data to the component above by using
this.$router.push({path:`/hello/reports?report=3849534583957`, params: {data: 'hey'}})`
However, when I try to look at the params in the vue devtools or by console logging this.$route.params.data it returns me undefined.
I believe I am doing everything correctly, please help me understand where I am going wrong. I have tried replacing the full path property's value with just the regular path property's value, inside the push method as well. Thank you
Router params map to values that are setup in the router configuration.
const router = new VueRouter({
routes: [{ path: '/user/:id', component: User }]
})
id is a valid param for this route.
Find more on the official docs: https://router.vuejs.org/guide/essentials/dynamic-matching.html#dynamic-route-matching

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)

How to keep query string parameters in URL when accessing a route of an Angular 2 app?

I have an Angular 2 test app running the latest alpha (37). There are just three routes, that look like this:
#RouteConfig([
{ path: '/', component: Home, as: 'home' },
{ path: '/errors', component: Errors, as: 'errors' },
{ path: '/about', component: About, as: 'about' }
])
I can access the routes, and when I place query string params in the URL I can read them just fine. However, a few instants after I read the parameters, I noticed that the route loads fine and the URL refreshes, removing the query string parameters.
In other words, accessing this route:
http://localhost:5555/errors?test=abc
Loads the /errors route, but right after the application loads the URL turns into:
http://localhost:5555/errors
That would be confusing to a user. I would like to keep the query string parameters in the URL.
I know, it's in alpha, but is this a bug or I forgot to set something up on the router? How can I keep whatever query string parameters in the URL?
Thanks!
This is fixed in Alpha 41. The query string is now persisted.
Updating for Angular 2:
To preserve query parameters present in the current url, add
// import NavigationExtras
import { NavigationExtras } from '#angular/router';
// Set our navigation extras object
// that contains our global query params
let navigationExtras: NavigationExtras = {
preserveQueryParams: true
};
// Navigate to the login page with extras
this.router.navigate(['/someLink'], navigationExtras);
For more info, check here:
Try this
this.router.navigate(['target'], {preserveQueryParams: true});

Categories