Search code examples
javascriptmeteorreloadiron-routerpage-refresh

Refreshing page in Meteor with iron:router always clears route

I have a Meteor app that I've developed using the iron:router package. I know my users will have the tendency to reload the page because everybody loves to do that occasionally.

My problem is that every time the page is reloaded it goes back to the home page of my Meteor app.

Is there a way make the app stay on the route it was on when the page is reloaded?

Here is my routes code:

Router.configure({
  layoutTemplate: 'layout', // Defines the layout template
  loadingTemplate: 'loading' // Defines the loading template
});

// Add the dataNotFound plugin, which is responsible for
// rendering the dataNotFound template if your RouteController
// data function returns a false value
Router.plugin('dataNotFound', {
  notFoundTemplate: 'dataNotFound'
});

Router.route('/', {
  name: 'home',
  template: 'home'
});

Router.route('/signup');
Router.route('/login');
Router.route('/recoverpassword');
Router.route('/resetpassword');

Here is everything related to layout:

<template name="layout">
  {{> navigation}}
  {{> yield}}
  {{> footer}}
</template>

<head>
  <title>Ecclesia.Life</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

<body>
  <!-- Dropdown menu script -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>   

<template name="navigation">
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{pathFor route='home'}}">Ecclesia.Life</a>
        </div>

        <div class="navbar-collapse collapse" id="navbar-collapse" aria-expanded="false" style="height: 1px;">
            <ul class="nav navbar-nav">
                <li><a href="{{pathFor route='home'}}"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;&nbsp;&nbsp;Home</a></li>
                <li><a id="qrScanner" href="#" onclick="inDevelopment();"><span class="glyphicon glyphicon-qrcode"></span>&nbsp;&nbsp;&nbsp;&nbsp;QR Scanner</a></li>
                <script>
                    $('#qrScanner').click(function() {
                        alert("Still in in development");
                    });
                </script>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {{#if currentUser}}
                    {{#if isInRole 'admin'}}
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;&nbsp;&nbsp;Maintenance <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="/manageusers"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;&nbsp;&nbsp;Manage Users</a>
                                </li>
                                <li><a href="/addqrpage"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;&nbsp;&nbsp;Add QR Page</a></li>
                            </ul>
                        </li>
                    {{/if}}
                    <li><a href="/@{{currentUser.username}}"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;&nbsp;&nbsp;{{currentUser.profile.firstName}}&nbsp;{{currentUser.profile.lastName}}</a></li>
                    <li><a id="logout" href="{{pathFor route='login'}}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;&nbsp;&nbsp;Log out</a></li>
                {{else}}
                    <li><a href="{{pathFor route='login'}}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;&nbsp;&nbsp;&nbsp;Log in</a></li>
                    <li><a href="{{pathFor route='signup'}}"><span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;&nbsp;&nbsp;Sign up</a></li>
                {{/if}}
            </ul>
        </div>
    </div>
</nav>


<template name="footer">
    <footer class="footer footer-default">
        <div class="container-fluid">
            <hr />
            <p class="text-muted">Copyright &copy; Ecclesia.Life, 2015.</p>
        </div>
    </footer>
</template>
Solution

  • OK, I have put together small test repo and everything works perfectly. Try it out, and maybe you will spot difference in your code. If it still does not work, post more code (template definitions at least) and in what folders you have your files. Also what packages you have installed.