I've just finished developing my first Backbone app and I detected a small quirk with the Router which I don't seem to be able to fix.
My routes look like this:
routes: {
'': 'index',
'jobs/:id': 'viewJob',
'*default': 'notFound'
}
It works fine when serving the app from the server root, but it doesn't when I serve it from a subfolder. In that case I always get the default route.
I though adding the root param to the backbone history would do the trick so I added it like this:
Backbone.history.start({ pushState: true, root: '/subdir/' });
With this the app seems to load as expected but the Router is automatically adding the root to all the routes and it ends up being duplicated, so when I first visit the website:
http://mysite.com/subdir/
It loads the app and changes it to this:
http://mysite.com/subdir/subdir/
This makes the app to break when reloading the page or using the browser back button as that route doesn't really exist.
What would be the approach to avoid this? I don't want to hardcode the folder name in the routes as it might change or be served from the root.
UPDATE: I've just realized I was adding the duplicated folder name myself using router.navigate somewhere in my code. I just removed it and everything works as expected.
Just a small guess.. do you really want pushState turned on? This can cause problems on reload if the server is not setup to serve out of the new directory.
Related
I have a project using nextjs v12
I have 2 routes that are overlapping in a weird way.
/:academy/:course
/questions/:id
when I load /questions/1 it works as expected
when I load /mit/math it works as expected
The issue:
when I redirect from /questions/1 to /questions/2,
it loads, you guessed it, the other route! (/:academy/:course)
and more, when I refresh the page (after the redirect) it will load the /questions/:id!!!
I tried
check for miss spelling
make /questions/:id -> /aquestions/:id
so, do you know a way to solve this issue?
thanks.
Solved
it was /q/:id and I renamed it to /q/:id.
and because it's with ssr (I think), I had to clear the cache and restart the project.
This should not happen, because according to official nextJS docs,
Predefined routes take precedence over dynamic routes and dynamic
routes over catch-all routes.
https://nextjs.org/docs/routing/dynamic-routes
In this case, it looks like we are trying to use 2 partial dynamic path, that is why nextJS is not able to figure out the correct path, you can add rewrite rule to always send /questions/* paths to /questions/:id
https://nextjs.org/docs/api-reference/next.config.js/rewrites
Can you please share the code how you are redirecting, to help you better?
I have deployed an app in Netlify, the link is: https://www.fluento.net. The website is working correctly, but whenever I try to access for example https://www.fluento.net/start, I get 404 error. If I go to the root url and press on the Start button, I get correctly redirected to https://www.fluento.net/start.
I have searched online and saw it might be a problem with history mode but I can't seem to figure out how to solve the issue.
This is the configuration of the router:
const routes = [
//Some routes in here, 404 not set!
]
const router = createRouter({
history: createWebHistory(),
routes
})
I have seen some solutions to add some configuration to nginx and so on, but my app is deployed in Netlify automatically when pushing to github, so I do not have any nginx configuration file or anything.
Also, I have seen that adding a catch all route and redirecting to index could work (as explained in the vue docs), but it didn't work for me, or maybe I did it wrong. But then again, I do not want to redirect to index, I want to redirect to the correct website according to the URL. And having a catch all means that for any 404 I would be redirecting to the index (which I don't want to do).
Another weird thing I found, is that whenever I type: https://www.fluento.net/privacy or https://www.fluento.net/tos I can reach those pages. This is the view that serves them:
<template>
<iframe src="/tos.html"></iframe>
</template>
<style scoped>
object, iframe {
border: none;
height: 800px;
width: 100%;
min-height: calc(100vh - 125px);
}
</style>
Maybe not having any javascript makes those two routes work? Not sure, because the App component that calls them has some javascript already.
EDIT: For everyone in the same situation, I managed to find a fix. Not setting this as an answer because I don't really understand how this works, and can't explain it. But following this answer Vue Router return 404 when revisit to the url in another question, this is how to implement this in Netlify:
At the end of the routes file in Vue, add this route to catch all the unknown routes and send them to an error page.
{
path: '/:pathMatch(.*)*',
name: 'error404',
component: Error404
}
The error page could be a view like this:
<template>
<p>Not found</p>
</template>
And then create a file in the folder that will be public after the build command is executed. In my case npm run build builds my project and adds the content of public/ folder to the root of the website. So I added a file public/_redirects that will be added in the root of the website.
For example, if my website is https://mywebsite.com, there will be a https://mywebsite.com/_redirects file. This file is not accessible, but Netlify understands and will "compile".
public/_redirects:
/* /index.html 200
This is the part that I am not sure what it does, but please if someone could explain in the comments it would be great. But I think it redirects all the traffic from uncaught urls to the index with the original URL and then the index executes the vue-router.
This is it, if you look for an URL you don't catch in vue-router you should see the 404 page, otherwise you should see the correct view.
At the moment I'm building an Electron application which uses React (and the React Router).
When I open my packaged application (packaged with Electron Builder) initially no route is matched. So I logged the location.pathname which should be / on the initial load. Instead I get the entire path of where my index.html is placed (blabla/dist/mac/ds-video-wall.app/Contents/Resources/app.asar/dist/index.html).
I fixed this (temporary) by added the following code:
componentWillMount() {
// Electron 'bugfix', feels dirty
if (this.props.location.pathname !== '/') {
this.props.history.push('/');
}
}
After this redirect I can start using the navigation and everything works fine from there. Every time I change routes I log the location.pathname and it's always correct. So this problem only occurs on initial load.
However, I don't like my solution and I think this should be solved differently. Any ideas on how I can correct the wrong initial value of location.pathname?
This actually was quite easy to fix: I just needed to use the HashRouter instead of the BrowserRouter.
After that everything worked properly and I could remove my 'bugfix'.
I'm using the new router (not router-deprecated) in Angular2 RC1. I need to be able to load a JSON configuration file before the app continues loading. I'm using a Config class to grab my JSON configuration, but the problem is, I do not want the router-outlet to load until my configuration has completed loading.
I tried wrapping the <router-outlet> with an *ngIf, only to come across this issue: https://github.com/angular/angular/issues/8539
I also tried extending the <router-outlet>, per this article, but with no luck (doesn't work with RC1)
Angular1 has a way to "reload" the route, but this doesn't seem to be present in NG2.
How can I do this? How can I load my JSON config file after the app has loaded, and the render the app after the configuration has finished? Has anyone else successfully done this?
In the new router (>= RC.3) https://angular.io/docs/ts/latest/api/router/index/Router-interface.html#!#resetConfig-anchor resetConfig can be used
router.resetConfig([
{ path: 'team/:id', component: TeamCmp, children: [
{ path: 'simple', component: SimpleCmp },
{ path: 'user/:name', component: UserCmp }
] }
]);
For your case I would initialize the router with some dummy route and dummy component, then after your JSON is available load new routes and navigate to the new default route.
https://github.com/angular/angular/issues/11437#issuecomment-245995186 provides an RC.6 Plunker
How about considering a loading page? That way, if your data isn't fully loaded yet, it shows a loading page instead of your route.
See this question for suggestions on how to implement a loading screen in Angular2.
Update:
In the other hand, I just find out that we can pre load a data using a route resolver. I'm still learning about it too, and this angular documentation might help.
In my backbone application I trying to tidy my URLs up a little bit, I am wanting something that looks like this,
http://develpoment.dev/dashboard
htttp://development.dev/project/create
What is happening at the moment is that if I navigate too, http://develpoment.dev/#dashboard then the hash gets stripped out and the page loads as I would expect it too.
However if I directly access http://develpoment.dev/dashboard then I get a 404 page not found, this it not great for users who want to bookmark or return an URL later, have I set something up incorrectly?
Here is how I initialize my Router.
$(function(){
App.Routes.Application = new App.Routes.app();
Backbone.history.start({ pushState: true });
});
404 is expected result as you dont have any page under http://develpoment.dev/dashboard URL
In case of single page application, all URLs under site domain should be mapped to one page, the bootstrap page you start application with.