I'm loading my routes through an API. This works just fine as long as you're starting the page from root #/, and I can load pages through <router-link> just fine (i.e. #/SomeSubPage).
The problems appears when trying to go to #/SomeSubPage directly (permalink to http://mysite/#SomeSubPage), or when clicking refresh in the browser when you're on the route.
I understand that this is because the routes are loaded from API, which means they are not available on the initial page load, so vue-router doesn't yet know about them.
An example of how the routes are added is:
fetch('http://mysite/api/routes').then(response => response.json())
.then(function(myRoutes) {
myRoutes.forEach(function(myRoute) {
router.addRoutes([{
path: myRoute.path,
component: () => import('somecomponent.vue')
}]);
});
});
Seing as this is loaded async and not loaded until after the route is first initialized, any request to #/SomeSubPage are not caught because the route definition is not yet ready.
Is there a way to make vue-router refresh itself when a new route has been added, so that you can go to #/SomeSubPage and have it work on the first try?
Related
I'm running an express server and if no other certain URLS aren't met, the user is redirected to the React App:
app.get("*", verify, (req, res) => {
if (maintenance) {
return res.sendFile("./maintenance.html", { root: __dirname });
}
return res.sendFile(
path.resolve(__dirname, "../frontend/build", "index.html")
);
});
This successfully runs the verify middleware needed to check if the user making the request is logged in, if not it redirects them to another service for them to login.
I would've thought that since all URLS that are being used are going through the whole web app is going through this express server, the verify middleware would've been executed no matter what page the user is on. However, this middleware is only executed upon either opening the site on a browser that hasn't been to the site yet (not cached) or if the user force refreshes the page.
I'm new to React and this has led me to believe that React loads the whole app, and upon each change of page (for example from /home to /profile) it doesn't change the url, just loads the portion of the app that's already loaded and so no matter what page the user is on, express will always see that the user is only on the root domain.
How would I get pass this without doing any of this logic on the frontend side. E.g. run the verify function before each page on the react app is loaded into view
Since React is all client side rendering you will need to handle that middleware in your React router, not your Node router. On the frontend we call this "middleware" protected routes.
The overall point is, you will need to protect those routes on the frontend, as when you change a page in React, Node does not know about it (because React is client side rendered).
I am working on a single page application with vuex and vue routing.
Current Setup:
navigation via dropdown menu and matching searchstring from a textfield
on search-btn click navigate to a result page with the search-text as parameter
in the created() method of that result page fire action to the api
-- if the request was successful continue to load the page
-- if the request was not successul redirect to a "NotFound" error page (for example misspelled word was not found in database)
the problem
I cannot navigate back again once I hit the NotFound page. It will try to load the previous page with /result/wrong_word path that will again lead to the NotFound page. How can I solve this? Is there a way to manipulate the history stack of vue router?
in router.js:
mode: 'history'
I am trying to use Google Authentication in my Angular 4 app. I loaded Google platform.js and api.js in index.html. Now onClick login button I do
gapi.load('auth2', () => {
this.router.navigateByUrl('/home');
});
Now instead of replacing the previous route, Angular is stacking the new route over the old route (/login). I can see from web console that both my Login and Home components are present as below,
<app>
<router-outlet><router-outlet>
<home></home>
<login></login>
</app>
Home is supposed to replace Login, but that didn't happen. Can anyone offer some help here?
Gapi client library does not go well with Angular, I used Rest API calls instead. That solved the issue.
My React app is currently nested inside of a Spring app, which means my routing is mixed. For example, /route/1 is handled by react-router, but /route/1/details is not.
I have a component which receives a destination URL from the server as props. Some destinations are inside the router and others are outside. In an attempt to safely use <Link /> in place of <a />, I have the following catch-all route handler:
{
path: '*',
onEnter({location}) {
window.location.href = location.pathname;
}
}
This works to get me out of react-router and back to Spring; however, it breaks the back button. Pressing back from here cycles through the URL history without ever reloading the page. (The history is all routes handled by react-router.)
Am I missing something obvious here? I think I want back to force a reload, but I'm not sure how. (I see that this is sort of an XY-problem; I'm open to suggestions for different ways of approaching the problem.)
I recognize this is not an ideal solution; it is one step in a migration plan.
So i am trying to make it so when the user hit one of the profiles, they get pushed to the profile page of the user the click on.
I am using currently using this set of code:
const self = this;
browserHistory.push({
pathname: '/users/' + self.props.user.username,
state: {_id: self.props.user._id}
});
Which just enter the correct url in the url bar. Although, the page does not load/reload. So i manually have to reload the page to get into the userprofile
Thank you for your time and help
tl;dr
You have to use a router which works properly with Meteor, right now FlowRouter is the best option to go
Reloading the page is not the expected behavior when route changes in Meteor, only the content of the page should be change to match the new route. Because apps created by Meteor are Single-page application, meaning that all content/code of your app are loaded at your first load.
After the first load, all required code for your app to work are already in client so when route changes the required content will be compute and put on the page, no request will be send to server.