Recently, I've been working on a new project to set up a blogging system. The next step in my plan is to focus on the admin section, specifically editing posts.
My idea for organizing the routes is as follows:
- /blog - Home page
- /blog/:slug - Accessing individual posts
- /blog/admin - Admin section access
These are the current routes I have implemented:
const routes: Routes = [
{path: '', component: BlogHomeComponent},
{path: 'admin', component: BlogAdminComponent},
{
path: ':slug', component: PostComponent,
children: [
{
path: 'edit',
component: PostEditComponent
}
]
},
];
Now, I am focusing on setting up the 'edit post' section. My idea is to create a route like this:
/blog/:slug/edit
With this setup, the URL structure could look something like: /blog/post-title-thing-im-talking-about/edit
This way, I can easily add /edit at the end of each post URL to edit it.
However, the current routing setup is not functioning correctly. It tries to load the page and then redirects out of the blog module to the projects module, resulting in a route like:
/blog/projects
Here are the main routing instructions in my app.module:
const routes: Routes = [
{
path: 'blog',
loadChildren: './blog/blog.module#BlogModule'
},
{
path: 'projects',
loadChildren: './projects/projects.module#ProjectsModule'
},
{path: 'contact', component: ContactComponent},
{path: '', component: HomeComponent}
];
I suspect that the issue lies in the fact that the system is looking for a URL pattern like "/blog/blog-post-title/edit" instead of matching /blog/***/edit. I have experimented with different routing setups, but encountered errors such as:
"'/blog/blog-post-name-thing/edit' does not exist as a current route."
Is there a way to implement dynamic routing in this scenario?