I'm trying to build a React app, and getting some trouble with React Router.
First of all, my url always has some weird hashstring at its' end.
For example:
http://localhost:3000/#/?_k=gb3epe
Also, I'm not sure whether the hashtag in the url and the following gibberish are part of the same problem or if they're related to 2 different problems. (I'm currently using React-Router v1.0).
Secondly, I think that the weird URL is preventing me from using the "action" property on forms, and would also like to know if there is a better way to move around React renders then relaying on forms.
Thanks.
If we're talking about react-router v1.0, then to remove this hash string you should pass a { queryKey: false } parameter to the createBrowserHistory function.
var createBrowserHistory = require('history/lib/createBrowserHistory');
ReactDOM.render(
<Router history={ createBrowserHistory({ queryKey: false }) }
routes={ ReactRoutes } />,
document.getElementById('some-container')
);
To move between routes react-router provides Link component which you can use inside your components.
Related
I have the following route structure
src/routes/[slug]/results
src/routes/[slug]/about
I can't figure out how to link to the routes in SvelteKit. The routes themselves work when I access them through the browser navigation bar.
How can I create a simple links on the [slug] page, that will link to the child routes?
Both below link to the root:
results
results
Tried something like below, but that didn't work.
results
results
I assume it's something similar, but the SvelteKit documentation on routing and advanced routing don't mention anything related to navigation within dynamic routes.
Would just add the parameter to the link:
<script>
import { page } from '$app/stores';
</script>
Results
I figured it out, it was a bit hidden in the documents (and I'm a starter, so not fully aware of all the concepts yet).
In +page.js:
/** #type {import('./$types').PageLoad} */
export function load({ params }) {
return {
slug: params.slug
};
}
In +page.svelte:
<script>
export let data;
</script>
results
share
I have the following route:
<Route path="/cases" component={Cases} />
This route handles the following example paths
/cases
/cases/1
I have an iframe in this route that is responsible for handing all user interactions. On a location change in the iframe, the iframe posts a message to the parent window notifying it that the url has changed.
I want to be able to change the route in the parent window without re-rendering the iframe.
This is my current solution
this.props.history.replace(pathnameFromIframe);
shouldComponentUpdate = () => {
return false;
}
This solution works but it goes against the React docs:
shouldComponentUpdate ... method only exists as a performance
optimization. Do not rely on it to “prevent” a rendering, as this can
lead to bugs.
https://reactjs.org/docs/react-component.html#shouldcomponentupdate
Can I solve this some other way?
Is it perhaps possible to change the route without adding the route as a prop in the component? This would solve the problem I believe.
i think hashHistory what u need? if im not mistaken
import { hashHistory } from 'react-router';
hashHistory.push({
pathname:"/url-url",
});
I am trying to use a third party authentication resource that my client wants(WeChat). This works by authenticating on their site and then redirecting the user to the URL that we give with a "code" parameter. It does not support adding a /#/ at the end of the url. So I am getting back
www.mywebsitedomain.com/code=test123
I am using react-router and so it automatically changes it to
www.mywebsitedomain.com/code=test123#/?_k=1dcv0i
so that code does not show up in props.location or props.params.
I cannot figure out how to get that code.
Any one have any ideas?
You have to implement a history component to handle that in react-router.
import { useBasename } from 'history'
import createBrowserHistory from 'history/lib/createBrowserHistory';
export default useBasename(createBrowserHistory)({ basename: '/yourUrlBase' });
Then import this file in your main/app/index.js
To change the route you need to use a pushState.
history.pushState(null, '/internalUrl/' + urlParameters);
And your route should be:
<Route path="internalUrl/:urlParameters" component={YourView} />
Also you can find a bit more info and a complete tutorial on this link: https://css-tricks.com/learning-react-router/#article-header-id-9
I have an angular 2 app with the following routes:
#RouteConfig([
new Route({ path: '/', component: Home, name: 'Home', useAsDefault: true}),
new Route({ path: '/employees', component: ViewEmployees, name: 'ViewEmployees'}),
new Route({ path: '/employees/add', component: AddEmployee, name: 'AddEmployee'}),
])
among others. When I change routes in the following way:
<a [routerLink]="['ViewEmployees']">View Employees</a>
There are no issues. I can change routes in this way from either the home page or the AddEmployee route. The issue comes when I'm in the AddEmployee route and try to change routes in a programmatic way like this:
import {Router} from 'angular2/router';
...
constructor(private _router:Router) {}
...
navigate() {
this._router.navigate(['ViewEmployees']);
}
it doesn't work. It sends me to the ViewEmployees view and then reloads the entire app. If I do that same programmatic route change from the Home component I don't have any issues; the app doesn't reload.
Does anyone have any ideas why it would do this in just this one case? I need it to work so that I can save the employee that's added and then go back to the employee list view.
Thanks in advance for the help!
Do you call navigate() from within a <form> Tag?
I had the same Problem. There exist some issues describing this behavior on Angular2s GitHub but they are all closed because they belong to the old router. The page reload seems to occur when you use router.navigate() inside a function called by a submit button inside a form. This can cause the browser to append a ? at the end of the URL and reload it.
The solution is very simple: Just return false at the end of your navigate() function. This prevents the bowser to use it's default action when submitting forms. Usually angular stops such default behavior but strangely not in this case.
Have you set the <base href>?
As mentioned in the Router guide
Add the following code to your index.html after the opening head tag:
<base href="/">
From RouterLink docs:
The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent.
Use:
<a [routerLink]="['/ViewEmployees']">View Employees</a>
I want to create a website that uses React JS as the handler for the UI component and Backbone JS for the routing. I don't like to follow the usual routing, for example:
www.domain-name.com/blog1
www.domain-name.com/blog1/post1
www.domain-name.com/blog1/profile
I would like to achieve a routing similar to this:
blog1.domain-name.com
blog1.domain-name.com/post1
blog1.domain-name.com/profile
Can someone advice me where to start because I can't get my footing. If you can give me tutorial or books that can help me, that would be great.
Pardon me if this seemed to be a broad question.
I'm not exactly sure what you're asking, but there is a simple way to use your Backbone Router with React components / views. Just declare your routes like usual in Backbone, and have each route render the proper react component:
In your router:
routes: {
'signup': 'signup',
'posts/new': 'newPost'
....
}
newPost: function() {
reactMount = $('.react-mount')[0]
React.renderComponent(MyNewPostReactComponent, whateverProps, reactMount)
}
Then you just need to have the proper DOM element with .react-mount. You can have this be the empty body, and each of your routes just renders a full react component, for example.