From the docs
https://angular.io/guide/router
What does the route with '**' do? What do the two asterisks correspond to?
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent },
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
From a quick glance of the documentation, I assume it is a wildcard route.
Quote from the docs:
'Leave the default and the wildcard routes! These are concerns at the top level of the application itself.'
'Each routing module augments the route configuration in the order of import...
The wildcard route — which matches every URL — will intercept the attempt to navigate to a hero route.'
It is a wildcard route. A catch-all for any URL not matched above it.
You do not have to have one of these but if you don't, when the user navigates to a bad route, he/she will NOT see a 404. They'll see a blank page which is just confusing.
This gives us the opportunity to provide them with a message -- a much better UX!
Related
I am trying to create localized routes with optional first param like /lang?/../../, but without a custom server.
From 9.5 NextJS has this option dynamic optionall parameters, if you set the folder or a file with a name:
[[...param]]. I did that.
The problem is that, i have other routes and I want all of them to be with that lang prefix, ut optional with default language, if that lang is not provided
I have a folder [[...lang]] with a file index.js, with simple function component just for testing. Now optional parameter works for the home page / and /en, but I have other files, which I want to be with that optional lang. For the example, I have about.js and I want to access it via /en/about and /about.
I can't put about.js inside [[...lang]], because, I am getting an error:
Failed to reload dynamic routes: Error: Catch-all must be the last part of the URL.
I know what it says and why is that, but I have a fixed collection of languages ['en', 'fr'] and I can check is there a lang.
Is there a way, without a custom server to use optionally a dynamic first part of the path, like
/en/about and /about ?
I think you are talking about this feature. Have a look on this https://nextjs.org/blog/next-9-5#support-for-rewrites-redirects-and-headers
To extend the answer from #Vibhav, in next.config.js:
const nextConfig = {
async rewrites(){
return [
// URLs without a base route lang param like /my-page
{
source: '/',
destination: '/'
},
// URLs with a base route lang param like /en/my-page
{
source: '/:lang*/:page*',
destination: '/:page*'
},
// URLs `/en/post/post_id`
{
source: '/:lang/:path/:page',
destination: '/:path/:page'
},
]
}
};
module.exports = withBundleAnalyzer(nextConfig);
all pages are in the pages folder. Not the best solution for now, because it works in a deep up to like /pages/another-folder/file.
You can even get the lang param in your pages or _app.js:
....
const router = useRouter();
if(router.query.lang){
pageProps.lang = router.query.lang;
}
console.log(pageProps.lang);
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
For URL - /en/my-page, router.query.lang will be equal to en.
For URL - /my-page, router.query.lang will be undefined, but you can set a default lang.
I have routes in my controller loaded in /config/routes/annotations.yaml
controllers:
resource: ../../src/Controller/
type: annotation
I have routes in /config/routes.yaml
about:
path: /about
controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController::templateAction
defaults:
template: front/about.html.twig
...
Dynamic routes in "controllers" are overriding my "static" routes.
What is the best way to load "static" routes before those in controllers.
I made it work by commenting the content in /config/routes/annotations.yaml and pasting it in the end of /config/routes.yaml but I don't feel it's the best way to do it...
Technically this might not be enough though. Any route loaded after this will be ignored, and if you are using annotations, you have to put this action in the last action of the last controller sorted alphabetically.
Configure this route in yml, and put it at the end of routes.yml.
This route will be the last to execute (performance hit), and it will catch all requests, so make sure you throw 404-s properly.
(Am I right in assuming that the client wants to be able to configure routes completely? eg CMS pages? Had that situation a couple of times)
It didn't want to change my url nor using the alphabetical trick as suggested in the comments.
I fixed it by changing the order of imported routes in the kernel.
Instead of:
protected function configureRoutes(RouteCollectionBuilder $routes)
{
$confDir = $this->getProjectDir().'/config';
$routes->import($confDir.'/{routes}/*'.self::CONFIG_EXTS, '/', 'glob');
$routes->import($confDir.'/{routes}/'.$this->environment.'/**/*'.self::CONFIG_EXTS, '/', 'glob');
$routes->import($confDir.'/{routes}'.self::CONFIG_EXTS, '/', 'glob');
}
I
protected function configureRoutes(RouteCollectionBuilder $routes)
{
$confDir = $this->getProjectDir().'/config';
# routes loaded in routes.yaml
$routes->import($confDir.'/{routes}'.self::CONFIG_EXTS, '/', 'glob');
# routes loaded in routes/annotations.yaml
$routes->import($confDir.'/{routes}/*'.self::CONFIG_EXTS, '/', 'glob');
$routes->import($confDir.'/{routes}/'.$this->environment.'/**/*'.self::CONFIG_EXTS, '/', 'glob');
}
You can avoid changing the kernel logic by putting the controller with annotations after the static route in routes.xml:
browserconfig:
path: /browserconfig.xml
controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController::templateAction
defaults:
template: browserconfig.xml.twig
app_document:
resource: App\Controller\DocumentController
type: annotation
I'm trying to make the socially tutorial from the meteor js web but I'm stuck on the step 5 Routing & Multiple Views
When I click on the link to see "party details" the javascript console says that the route doesn't exists.
This is the code from the view that has the link.
<a [routerLink]="['/party', party._id]">{{party.name}}</a>
And this is the code from the routes:
const routes: RouterConfig = [
{ path: '', component: PartiesListComponent },
{ path: 'party/:partyId', component: PartyDetailsComponent }
];
This is the output from the console.
browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'party;_str=57df4efc74ee85f397a687f3'
The most likely reason for this is that party._id is actually an object, not the id primitive. If I had to put my money on it, I'd say this it what it looks like
party: {
_id: {
_str: '57df4efc74ee85f397a687f3'
}
}
When you add an object into the routerLink array, it becomes a matrix parameter for the previous path segment. So if the above is the actual structure, then would result in
/party;_str=57df4efc74ee85f397a687f3
which is the problem you are facing. If you want to just add the id value to the path, then you should extract the _str
<a [routerLink]="['/party', party._id._str]">
This will give you the route
/party/57df4efc74ee85f397a687f3
which is what you want.
See Also:
Angular docs on Route Parameters
I want to display posts for different cities, defined by cityId:
FlowRouter.route("/:cityId", {
name: 'postList',
action: function() {
console.log(FlowRouter.getParam("cityId"));
return BlazeLayout.render('mainLayout', {
top: 'header',
body: 'postList'
});
}
});
Alongside with that I of course have generic routes like 'admin', 'signup' and so on.
But when I go to /signup, the postList route gets activated, treating 'signup' word as a city id, and 'signup' is logged in console.
Defining route like FlowRouter.route("/postList/:cityId") is not an option.
Actually, you need to control route definition order.
define the /signup route before the generic one: /:cityId
I am trying to use the ensureSignedIn plugin on all routes except for a front 'home' page that has buttons to login to separate parts of the site.
Here's my route for 'home':
Router.route('/', function () {
this.render('home');
});
Here's the line for the plugin and exceptions:
Router.plugin('ensureSignedIn', {
except: ['home', 'atSignIn', 'atSignUp', 'atForgotPassword']
});
Both snippets are from my lib/routes.js file, if that makes a difference.
I've tried adding different route names in the except: portion, and they get correctly excepted, but I can't for the life of me get the 'home' route to not show "Must be logged in".
I've googled and read through gitHub issues and haven't seen anyone else with this problem, so it's probably something I'm doing wrong and not a bug with useraccounts or iron-router.
Set the name of the / route to root, then add that route name to the ensureSignedIn settings:
Router.route('/', {
name: 'root',
template: 'home',
action: function() {
this.render();
}
});
Router.plugin('ensureSignedIn', {
except: ['root', 'atSignIn', 'atSignUp', 'atForgotPassword', 'atResetPwd']
});