I built an app using routes in React Js. I have some pages in my app which are in my routes. Also, I have created an array:
const routes = [{
path: "/home",
title: "home"
},
{
path: "/about",
title: "about"
}
];
This array contains my breadcrumbs. The logic is next: if the URL matches the route from routes, I display the title from routes. But, I don't want use the about page. When I will click on about page I want to display also title from home page. The problem is when I click on about page I get the next error:
Cannot read property 'title' of undefined.
How can I hide this error?
You can use conditional (ternary) operator as follows:
const myvar = object ? object.name : undefined;
Related
I have tips.pdf that I would like to live at /tips.
When a user manually types in /tips I want it to redirect to /tips.pdf, preferably in a new tab.
When I updated my routing module I get Error: Cannot match any routes. URL Segment: 'tips'.
const ROUTES: Routes = [
{
path: '', redirectTo: '/home', pathMatch: 'full'
},
{
path: 'home', component: HomeComponent
},
{
path: 'fun', component: FunComponent
},
{
path: 'tips', redirectTo: '../assets/pdfs/tips.pdf', pathMatch: 'full'
}
]
Is this because I don't have a component? Obviously I don't want to create a component just for a stationary pdf in my asset folder.
It's because you don't have any route maching '../assets/pdfs/tips.pdf'. The first redirection works because home is matching the second entry in ROUTES.
You don't need Angular to do that, you need to add the redirection in your server configuration.
I don't think Angular can do that.
One thing you can try is create a dummy component that opens a url using window.open.
{
path: 'tips', component: FilOpenerComponent
}
export class FilOpenerComponent {
constructor(private router: Router) {
window.open("../assets/pdfs" + this.router.url + ".pdf");
}
}
And you can further generalize this component using query params to know exactly where to look for the file.
Either the current path or redirected path should have a component in Angular.
so as mentioned in one of the answer the logic has to be added in component
I use this routes controller in order to navigate to page A. At page A it is possible to navigate to page B.
function getRecordReportState() {
var state = {
name: 'auth.recordreport',
url: '/recordreport/:userId/:month/:year',
templateUrl: 'app/recordReport/recordReport/recordReport.html',
In page B I use this command to navigate back to page A:
function cancelAndGoBack() {
$window.history.back();
}
My question now would be if there is a possibility to navigate to page A programmatically where I also can set the parameter /:userId/:month/:year ?
Yes. You can simply do:
$state.go('auth.recordreport', {userId: 'someuser', month: 4, year: 2016});
I'm trying to do something seemingly simple. I have the following defined:
#Routes([
{ path: '/stores', component: StoresComponent },
{ path: '/stores/new', component: StoresCreateComponent}
])
When I navigate to /stores I display a list of existing stores. I have a link on that page to navigate to a screen to create a new store. However, when I navigate to /stores/new, I get the following:
browser_adapter.ts:78Error: Uncaught (in promise): Component 'StoresComponent' does not have route configuration
I'm pretty new to Angular so I'm not entirely sure what I need to do in order to get a route like that working.
Order routes so that more specific ones come first and less specific ones last. That's a current limitation of the RC.1 router.
#Routes([
{ path: '/stores/new', component: StoresCreateComponent}
{ path: '/stores', component: StoresComponent },
])
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>
In ExtJs, what is the best way to handle Browser refresh?
Say, I've a page with two tabs A and B
and the token when tab A is active is #mytoken/:someidforA
and the token when tab B is actibe is #mytoken/:someidforB
How do we ensure that the page stays in the same tab when we refresh the browser?
I'm doing something like this using Router in ExtJs5
window.onbeforeunload = function() {
token = // get history token
MyApp.getController('Main').redirectTo(token);
}
and inside the ViewControllers -
routes: {
"#mytoken/:someidforA" : "loadA",
"#mytoken/:someidforB" : "loadB"
}
Is this a good way to do it?
I would personally use the documented routes
Example:
Ext.define('MyApp.view.main.MainController', {
extend : 'Ext.app.ViewController',
routes : {
'user/:id' : 'onUser'
},
onUser : function(id) {
//...
}
});
You can also define the default route with the defaultToken property:
defaultToken : 'home'
It seems like you are already using some of these features. If the URL is something like example.com/#user/4 then on page refresh the application can handle this route as it previously did and show the same page/section.
To restore all the tabs that were open before refresh you'd probably have to look at using something like localstorage to keep state across page refreshes