Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Page refresh with URL params

See original GitHub issue

I have all urls using navigo routing. All of them are working on page refresh except the one with URL parameter (/course/:id). On page refresh /course/:id is loading home page!

Navigation without page refresh is working fine.

Given below are the relevant code from server and client.

What am I missing?

Server (NodeJS+Express)

redirects to /index.html

...
app.use('/courses', express.static('public'));
app.use('/course/:courseId', express.static('public'));
...

Client

    router.on({
        '*': function () {
            console.log("*");
            $('#header').show();
            $('#footer').show();
            $(home).find('#twitter').html('');
            $(home).find('#twitter').html(require("../html/twitter.html"));
            $('#main').html(home);
        },
        '/courses': function () {
            console.log("/courses");
            $('#header').show();
            $('#footer').show();
            $('#main').html(courses);
            $('#courseslist').show();
            var courseObj = require('./course')();
            courseObj.showCourses();
        },
        '/course/:id': function (params, query) { // REVISIT Page reload breaks
            console.log("/course/"+params.id);
            $('#header').show();
            $('#footer').show();
            $('#main').html(course);
            var courseObj = require('./course')();
            courseObj.showCourse(parseInt(params.id));
        },
...

Thanks in advance!

Issue Analytics

State:
Created 6 years ago
Comments:8

Top GitHub Comments

4reactions

c-bikcommented, Jan 16, 2018

@dancespiele Yup that did it! Thanks a tonne, you are a life saver.

I ended up only with the following change:

var router = new Navigo(window.location.origin);

… in stead of…

var router = new Navigo();

Note : It also worked without…

if(!router.lastRouteResolved().url) {
    route.navigate('/*');
}

Been stuck with is problem for weeks, can’t thank you enough @dancespiele

2reactions

dancespielecommented, Jan 16, 2018

@c-bik try with this:

<!doctype html>
<html>

<head>
    <title>Simple Server</title>
</head>

<body>
    <a href="/courses">Courses</a><br>
    <a href="/course/1">Course-1 <b>Browser Refresh fails</b></a><br>
    <a href="/course/2">Course-2 <b>Browser Refresh fails</b></a><br>
    <a href="/about">About </a><br>
    <hr>
    <div id="route"></div>
    <script src="//unpkg.com/navigo@7"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        $(function () {
            var router = new Navigo('http://127.0.0.1:8080');
            router
                .on({
                    '/courses': function () {
                        $("#route").html('<h1>/courses</h1>');
                    },
                    '/course/:id': function (params, query) {
                        $("#route").html(
                            '<h1>/course</h1><br>params : '+JSON.stringify(params)
                            +'<br>query : '+JSON.stringify(query));
                    },
                    '/about': function () {
                        $("#route").html('<h1>/about</h1>');
                    }
                    '*': function () {
                        $("#route").html('<h1>*</h1>');
                    }
                })
                .resolve();
            if(!router.lastRouteResolved().url) {
                route.navigate('/*');
            }
    });
    </script>
</body>

</html>

In your case, maybe because you are using express you need to specify the root url. Another thing is that you don’t need data-navigo, it is only to create path that is not previously included in the router.

Top Results From Across the Web

Append to URL and refresh page - javascript - Stack Overflow

I am looking to write a piece of javascript that will append a parameter to the current URL and then refresh the page...

How to reload the current page with a query string parameter

I'm trying to refresh a page when ...

How to Reload a Page using JavaScript - W3docs

JavaScript provides a trendy among developers — location.reload() , which finds ways to reload the page at the current URL. The window.location object...

Location Reload Method: How to Reload a Page in JavaScript

JavaScript Location.reload() method provides means to reload the page at current URL. The syntax is the following:.

Change url parameters without refreshing the page with ...

For tracking purpose, we sometimes want to update the page url parameters but not refresh that page (ie: single page application).