I have a file under the pages folder named about.tsx. So the path for the page is /about and I'm able to access the page by visiting example.com/about. However, if I visit example.com/About, it will redirect to a 404 page.
I've checked the Nextjs repo, seems like this is the expected behavior. Therefore, is there a workaround that can make the path case insensitive so that example.com/About will also work and direct users to the /about page?
With using next v12
There are a lot of similar questions here that has this answer already. I'd like to note that this answer is handling redirecting with the url parameters by adding this after the pathname:
${request.nextUrl.search}
Add a new file in /pages named _middleware.ts
import { NextRequest, NextResponse } from "next/server";
export function middleware(request: NextRequest) {
if (request.nextUrl.pathname === request.nextUrl.pathname.toLocaleLowerCase())
return NextResponse.next();
return NextResponse.redirect(`${request.nextUrl.origin}${request.nextUrl.pathname.toLocaleLowerCase()}${request.nextUrl.search}`);
}
I agree that's Next.js's behavior, they only handle exact page name about instead of both about & About using the same file page/about.tsx
But the solution is you keep implementing a main page (e.g: about.tsx) and setup other pages to redirect to that page (e.g: About -> about) following this guide https://nextjs.org/docs/api-reference/next.config.js/redirects
// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/About',
destination: '/about',
permanent: true,
},
]
},
}
// Set permanent:true for 301 redirect & clean SEO!
Home.vue
<template>
<h3>Home</h3>
</template>
Test1.vue
<template>
<h3>TEst page {{symbol}}</h3>
</template>
<script>
export default {
data() {
return {
symbol: this.$route.params.id
}
},
}
</script>
export default new Router({
mode: 'history',
routes: [
{
path: '/test/:id',
component: Test1
},
{
path: '/home',
component: Home
},
]
})
I can't call through the website [netlifylink/test/1]. It's "Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site".
But can still access localhost:8080/test/1
i call localhost:8080/home and [netlifylink/home] is work. why?
help me please.Sorry for grammar.
It's also in the Vue documentation deployment section
https://cli.vuejs.org/guide/deployment.html#netlify
In order to receive direct hits using history mode on Vue Router, you need to create a file called _redirects under /public with the following content:
# Netlify settings for single-page application
/* /index.html 200
There are special deploy instructions for SPAs on Netlify. On this page: https://www.netlify.com/docs/redirects/ if you go to the History Pushstate and Single Page Apps section you will see this:
If you’re developing a single page app and want history pushstate to work so you get clean URLs, you’ll want to enable the following rewrite rule:
/* /index.html 200
This will effectively serve the index.html instead of giving a 404 no matter what URL the browser requests.
You need to add this to the _redirects file under the root of your built site.
create a file called netlify.toml in the root of your project and then paste this:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
I have created a new sample app with aurelia-cli.
A weird behaviour that got me stuck is with routing.
This is my main route.
{
route: "projects",
title: 'Project Section',
name:'project-section',
moduleId: './modules/projects/project-section',
nav: true
}
and this is my project-section file
export class ProjectSection {
configureRouter(config, router) {
config.map([
{ route: '', moduleId: './projects-list', nav: false, title: 'Projects List' },
{ route: ':id', moduleId: './project-detail', nav: false, title: 'Project Detail' }
]);
this.router = router;
}
}
now when I open a link like http://myapp.com/projects, it works fine, and if I refresh the page, it still works.
If I click a link to open the detail page http://myapp.com/projects/9348 that also works fine. But on refreshing this detail page, browser goes blank with
GET http://localhost:9000/projects/scripts/vendor-bundle.js net::ERR_ABORTED
error message in console
Am I missing something obvious? Is there a config setting to enable the refreshing of pages with /:id like routes?
The code is here at github aurelia-sample and you clone and run as usual
au run --watch
Thanks for any help
EDIT: does it have anything to do with
config.options.pushState = true;
in the app config?
I don't know if your problem has been resolved. But Yes, it is to do with the pushState being set to true. I myself faced this issue before. It is something to do with how Aurelia loads the JS for the page. I was unable to resolve it (albeit I'll admit I looked only for about 20 mins). But from what I saw you need to configure some setting to make this work.
Ok. This will help http://aurelia.io/docs/routing/configuration#options.
Baiscally:
Add a <base href="http://localhost:9000"> to index.html to redirect loading content from the base url. The rest of the configuration can be as you have kept it.
Also add config.options.root = '/' in your router config
The point that you are missing is that, (IMHO kind of counterintuitively), the subroutes defined by ProjectsSection only come to life once you actually navigate to /projects.
In other words, the following sequence works:
navigate to projects-list component (route of '' relative to the route of the section, that is, projects/ relative to the app)
Refresh that same page
Navigate to a details page.
The reason this sequence works has to do with how Aurelia resolves routes.
It first tries to match your route against the root configuration. It sees that the url starts with projects. So it checks to which component projects leads. It is ProjectSection in your case, therefore it uses that and checks whether it finds a configureRouter method on it. It does, because you've defined one, so it invokes it.
From then on, the route that it will try to match against that configuration is the the original route without the prefix which lead to that component. It was projects/ which lead to ProjectSection, followed by nothing, so the remainder of the route is / which is resolved as per the configuration you've created inside ProjectSection. In your case, that leads to projects-list.
The important part about this is that by performing this sequence, Aurelia gets a chance to invoke the configureRouter method on ProjectSection (since at (2), it navigates once again to projects/ relative to the app root). Therefore, a configuration which can be used against the url will exist.
In the problematic case, if you immediately navigate to /projects/:id, it will be matched against the root level configuration. There is no match, and since reloading counts as a first page load, there is no route to fall back to. That's why you are getting the error.
The important part about this scenario is that, contrary to the former case, the router skips invoking the configureRouter method on ProjectSection. If you set a breakpoint in that method, you will see that it does not get invoked. That's why I commented on is behavior as being counter-intuitive, because the behavior you (and me as well, when I first faced this problem) expect is a fairly common scenario.
I don't know of any official way to resolve this, so my suggestion is that you could try defining a wildcard route on the app level config like so:
{
route: "projects/*",
title: 'Project Section',
name:'project-section',
moduleId: './modules/projects/project-section',
nav: true
}
and see if it works (I am not sure - I've tried to provide you with a reason, but I don't have the means to try to reproduce it at this very moment).
Try adding a redirect route in the ProjectSection configureRouter function like so (taking your example):
export class ProjectSection {
configureRouter(config, router) {
config.map([
{ route: '', redirect: 'list' }, // Redirects to the list route when no specific route in the project section is specified
{ route: 'list', moduleId: './projects-list', nav: false, title: 'Projects List' },
{ route: ':id', moduleId: './project-detail', nav: false, title: 'Project Detail' }
]);
this.router = router;
}
}
Thanks for all the answers posted. I finally resolved the issue. I am still not sure if this is the right way or not but here is the trick that works.
Taking hint from Rud156's and answer from this question How to remove # from URL in Aurelia I just added
<base href="/">
in the index.html file, and everything works as expected.
To further investigate the issue I cloned the aurelia sample contact app
1- when you run the app as it is after cloning, everything works great.
2- if you add
config.options.pushState = true;
in the src/app.js, child routes will stop working.
3- Add
<base href="/">
in the index.html and everything will start working.
Hi Everyone I am working on an AngularJS project.
My project works fine on a route like: http://localhost/
But I have an admin panel like this: //localhost/admin/
So when I open this it's not working
but when I put a complete URL like this: localhost/admin/index.html#
then it works.
Project Structure is:
Please Have A look on Project Structure
If you are running the website in IIS you need to set Default Documents or check if it is set. I had the same issue a while ago and found the not all default were set.
You can create different states as per your project. For ex:
1. /login
2. /admin
3. /edit
and then you can mention configuration for each state with the html page you want to access. then you can use //localhost/admin and it will be referred by /admin state which you have created.
Code should be something like this
$stateProvider.state('admin',{
url:'/admin',
controller: 'AdminController',
templateUrl:'admin/index.html',
resolve: {
loadMyFiles:function($ocLazyLoad) { // this can be used for lazy loading of files
return $ocLazyLoad.load({
name:'MYPROJECT',
files:[
'styles/admin.css'
]
})
}
}
})
I'm building a filesytem based emberjs-app. But unfortunately the security won't allow me to push stuff to the history (see e.g. this but i guess that applies to all browsers).
setting the locationtype to none is fine, but I would still like to utilize the back and forward buttons and urls of the browser.
Is there a way to configure this (maybe setting the base-url to index.html, without rewriting the build process)?
edit
I call the url from my browser like this: file:///path/index.html.
in my routes.js and fileroute.js I've got this workaround:
// routes.js
export default Router.map(function() {
// this route only redirects to main
this.route('fileroute', {path: 'index.html'});
});
// routes/fileroute.js
// only for running app on filesystem
export default Ember.Route.extend({
redirect: function() {
this.transitionTo('fileroute.projects');
}
});
So I guess each hash-change would already effect the files-url
file:///path/#differentroute
also for
file:///path/#index.html/childRoute