Router is not defined

How-to Discussions
1

Please help, I’m stuck at the SignUp page of my app. After the user is created succesfully in the cloud service, i need to redirect the user to the SignIn Page. Then, fuse throws this error: router is not defined

The app have this structure:

MainView.ux

<App>
  <Router ux:Name="router"/>

  <JavaScript File="js/Navigation.js" />

  <.. some images, fonts, etc />

  <Navigator DefaultTemplate="Landing">
    <Landing ux:Template="Landing" router="router" />
    <SignIn ux:Template="SignIn" router="router" />
    <SignUp ux:Template="SignUp" router="router" />
    <ResetPassword ux:Template="ResetPassword" router="router" />
    <MainShop ux:Template="MainShop" router="router" />
    <Promos ux:Template="Promos" router="router" />
</Navigator>
</App>

And the routing works ok for all the pages above.

Navigation.js have all the routing functions:

var Observable = require('FuseJS/Observable');

function gotoSignInPage() {
  router.goto("SignIn");
}
function onLandingPageExit() {
  router.push("SignIn");
}
etc ...
module.exports = {
  gotoSignInPage : gotoSignInPage,
  onLandingPageExit : onLandingPageExit,
  etc ...
}

SignUp.ux has his own js SignUp.js where I require the Navigation.js file.

var Observable = require('FuseJS/Observable');
var navigation = require('js/Navigation.js');

var textEmail = Observable("");
var textFirstName = Observable("");
var textLastName = Observable("");
var textPassword = Observable("");

function gotError(err) {
  console.log(JSON.stringify(err));
}

function userRegistered(args) {
  console.log("Account created!");
  navigation.gotoSignInPage();
}

function onCreateAccountButton() {
	var user = new Backendless.User();

	user.email = textEmail.value;
	user.password = textPassword.value;
	user.firstname = textFirstName.value;
	user.lastname = textLastName.value;

	Backendless.UserService.register(user,
			new Backendless.Async(userRegistered, gotError));
}
module.exports = {
  onCreateAccountButton : onCreateAccountButton
  textEmail : textEmail;
  textFirstName : textFirstName;
  textLastName : textLastName;
  textPassword : textPassword;
}

SignUp.ux also has a PageControl with 3 pages for capturing the user info. In the third page there’s a button with a Clicked handler to make the remote call and create the user:

<Clicked>
  <Callback Handler="{onCreateAccountButton}"/>
</Clicked>

As I before mentioned, the user is created successfully and the gotoSignInPage() function is reached but the router is not recognized: router is not defined

I’ve had flagged the PageControl at SignUp.ux with IsRouterOutlet="false" according to the docs, but with no avail. Can someone shed some light on this?

Thanks in advance

2

Hi!

When you do var navigation = require('js/Navigation.js'); you’re not actually getting the same instance as you declare in your MainView.ux root, it’s giving you a new instance of that module.

This is because when you write <JavaScript File="SomeJS.js" /> you are creating a JS module local to that scope. This lets you have component local state using JS. However, if you require("someJSFile.js") several times, you will get the same module each time.

What you could do to resolve this while still keeping your structure mostly as is is to pass the router to the Navigation.js functions. You still have to pass the router instance as ux:Dependencies as you’re already doing though :slight_smile:

I hope this helps!!