preact-router Link issue with createHashHistory

[matteo-bombelli]

Issue description: When using Link (or a tag) with hash history when the user open a link in the new page, the resulting url does not contain the hashbang.

How to replicate using preact cli with default template and then install history module

npx react-cli create default testHashNavigation

Code

/src/components/app.js

import { h, Component } from 'preact';
import { Router } from 'preact-router';

import Header from './header';

// Code-splitting is automated for routes
import Home from '../routes/home';
import Profile from '../routes/profile';

import { createHashHistory } from 'history';

export default class App extends Component {

    /** Gets fired when the route changes.
     *  @param {Object} event       "change" event from [preact-router](http://git.io/preact-router)
     *  @param {string} event.url   The newly routed URL
     */
    handleRoute = e => {
        this.currentUrl = e.url;
    };

    render() {
        return (
            <div id="app">
                <Router history={createHashHistory()}>
                    <Home path="/" />
                    <Profile path="/profile/" user="me" />
                    <Profile path="/profile/:user" />
                </Router>
            </div>
        );
    }
}

/src/routes/home/index.js

import { h } from 'preact';
import style from './style';
import {Link} from "preact-router";

const Home = () => (
    <div class={style.home}>
        <h1>Home</h1>
        <p>This is the Home component.</p>
        <ul>
            <li><Link href="/profile/">profile</Link></li>
            <li><a href="/profile/example">profile example</a></li>
        </ul>
    </div>
);

export default Home;

/package.json

{
  "private": true,
  "name": "testhashrouting",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "build": "preact build",
    "serve": "sirv build --cors --single",
    "dev": "preact watch",
    "lint": "eslint src",
    "test": "jest"
  },
  "eslintConfig": {
    "extends": "preact",
    "ignorePatterns": [
      "build/"
    ]
  },
  "devDependencies": {
    "enzyme": "^3.10.0",
    "enzyme-adapter-preact-pure": "^2.0.0",
    "eslint": "^6.0.1",
    "eslint-config-preact": "^1.1.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.9.0",
    "jest-preset-preact": "^1.0.0",
    "preact-cli": "^3.0.0-rc.6",
    "preact-render-spy": "^1.2.1",
    "sirv-cli": "^0.4.5"
  },
  "dependencies": {
    "history": "^5.0.0",
    "preact": "^10.3.2",
    "preact-render-to-string": "^5.1.4",
    "preact-router": "^3.2.1"
  },
  "jest": {
    "preset": "jest-preset-preact",
    "setupFiles": [
      "<rootDir>/tests/__mocks__/browserMocks.js",
      "<rootDir>/tests/__mocks__/setupTests.js"
    ]
  }
}

[marvinhagemeister]

preact-router will push the href value as is to history. I think you need to use hash based URLs if you really want to use them:

<Link href="/profile/">profile</Link>
<a href="/profile/example">profile example</a>

// vs
<Link href="#profile/">profile</Link>
<a href="#profile/example">profile example</a>

It'd be nice if the router could be made aware of what kind of history it's using so that the URL can be formatted automatically, but I'm not aware of any way to detect that.

[matteo-bombelli]

preact-router will push the href value as is to history. I think you need to use hash based URLs if you really want to use them:

<Link href="/profile/">profile</Link>
<a href="/profile/example">profile example</a>

// vs
<Link href="#profile/">profile</Link>
<a href="#profile/example">profile example</a>

It'd be nice if the router could be made aware of what kind of history it's using so that the URL can be formatted automatically, but I'm not aware of any way to detect that.

could a solution for this be appreciated?

it is possible to use

customHistory.createHref({pathname:props.href}) 

I am testing it right now

Thank you!

[marvinhagemeister]

Yeah, I'd love to see support for that in preact-router :+1: