Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Why this double slash? #367

Closed
kraftwer1 opened this issue Apr 4, 2016 · 3 comments
Closed

Why this double slash? #367

kraftwer1 opened this issue Apr 4, 2016 · 3 comments
Labels
bug hashbang question

Comments

@kraftwer1
Copy link

When I change the URL in my browser, let's say from /#!/link1 to /#!/link2 and then hit enter, the route.params[0] is suddenly //link2 instead of /link2 and thus the listener page("/link2", fn); doesn't work anymore.

What am I doing wrong? Or is this a bug in page.js? Here's a fiddle:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Page.js</title>
        <script src="https://cdn.rawgit.com/visionmedia/page.js/master/page.js"></script>
    </head>

    <body>
        <a href="link1">Link 1</a>
        <a href="link2">Link 2</a>

        <script>
            page(function(route, next) {
                console.log(route.canonicalPath);
                console.log(route.path);
                console.log(route.pathname);
                console.log(route.params[0]);
                console.log(route.state.path);
                console.log("-------");

                next();
            });

            // Link 1 is default
            page("/", "/link1");

            page("/link1", function(route) {
                // Not getting here after hitting enter...
                console.log("/link1");
            });

            page("/link2", function(route) {
                // Not getting here after hitting enter...
                console.log("/link2");
            });

            page({
                hashbang: true
            });
        </script>
    </body>
</html>

EDIT:
Note that it works when I use a regex that supports possible double slashes, e.g:

page(/^\/\/?link2$/, function(route) {
    // Not getting here after hitting enter...
    console.log("/link2");
});
@klesniewski
Copy link

It seems that this library is no longer maintained (#384). I did not want to use regex, as it makes the path less readable, so instead, when I am hitting fallback route, I am checking if there are double slashes (which should not occur in any valid link I have) and reroute to path with a single slash. If that one will not be found (in case the URL is truly invalid/not found), the fallback will be hit again anyway.

page('*', function(ctx) {
    // Workaround an issue described here: https://github.com/visionmedia/page.js/issues/367
    if (ctx.path[1] === "/") {
        page.show(ctx.path.substring(1));
        return;
    }

   // Handle page not found case..
});

@developering
Copy link

@klesniewski Thanks for sharing your solution! One issue I found with that is it leaves the double slash route in the history, so if you then hit the back button it runs through the star route again and gets rerouted back to where you just were. I updated to use redirect instead of show and that took care of the issue for me. So, line 4 from your solution is updated to:

page.redirect(ctx.path.substring(1));

Thanks again for sharing. Definitely saved me some time figuring out a workaround.

@matthewp
Copy link
Collaborator

Hey everyone! Sorry for taking so long to respond. We had some other bug fixes with hashbang that I think might have also fixed this problem as a result. Trying out an example like you describe I don't see this problem occurring any more. Going to close, let me know if you find otherwise. Thanks!

screen shot 2018-01-18 at 6 44 06 am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug hashbang question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@matthewp @kraftwer1 @developering @klesniewski