Giter VIP home page Giter VIP logo

Comments (5)

neoeno avatar neoeno commented on June 2, 2024 2

Hello — I think I stumbled on this issue today and can share a reproduction.

Here's a replit link that has runnable code: https://replit.com/@neoeno/Reproduction-of-wouter-active-links-issue-with-hash-location

An example of how it looks in the browser:

Screen.Recording.2024-05-07.at.17.23.24.mov

And here's the relevant code:

// App.jsx

import "./App.css";
import { Route, Router, Link } from "wouter";
import { useHashLocation } from "wouter/use-hash-location";

export default function App() {
  return (
    <>
      <h1>Default useBrowserLocation activates the links</h1>
      <Router>
        <ul>
          <li>
            <Link
              href="/route-one"
              className={(active) => (active ? "active" : "normal")}
            >
              Link to Route One
            </Link>
          </li>
          <li>
            <Link
              href="/route-two"
              className={(active) => (active ? "active" : "normal")}
            >
              Link to Route Two
            </Link>
          </li>
        </ul>
        <Route path="/route-one">
          <p>Route One</p>
        </Route>
        <Route path="/route-two">
          <p>Route Two</p>
        </Route>
      </Router>

      <h1>useHashLocation does not activate the links</h1>
      <Router hook={useHashLocation}>
        <ul>
          <li>
            <Link
              href="/route-one"
              className={(active) => (active ? "active" : "normal")}
            >
              Link to Route One
            </Link>
          </li>
          <li>
            <Link
              href="/route-two"
              className={(active) => (active ? "active" : "normal")}
            >
              Link to Route Two
            </Link>
          </li>
        </ul>
        <Route path="/route-one">
          <p>Route One</p>
        </Route>
        <Route path="/route-two">
          <p>Route Two</p>
        </Route>
      </Router>
    </>
  );
}
/* App.css */

.active {
  border: 1px solid red;
}

I believe the issue occurs here: https://github.com/molefrog/wouter/blob/v3/packages/wouter/src/index.js#L239

  return asChild && isValidElement(children)
    ? cloneElement(children, { onClick, href })
    : h("a", {
        ...restProps,
        onClick,
        href,
        // `className` can be a function to apply the class if this link is active
        className: cls?.call ? cls(path === href) : cls, // <------
        children,
        ref,
      });

From debugging, href ends up having the #, while path does not. Could be related to #421?

Thanks for all your hard work on wouter! Please do say if you'd appreciate a PR to fix.

from wouter.

molefrog avatar molefrog commented on June 2, 2024

Hi! I can't reproduce this, would you mind sharing your code?

from wouter.

martonlederer avatar martonlederer commented on June 2, 2024

Hey! Yeah so it is really simple, just a home page and an App component:

export default function App() {
	return (
		<>
			<Nav />
			<main>
				<Router hook={useHashLocation}>
                    <Switch>
                       <Route path="/config" component={Config} />
                       <Route path="/" component={Home} />
                    </Switch>
                  </Router>
			</main>
		</>
	);
}

from wouter.

molefrog avatar molefrog commented on June 2, 2024

Does your link look like <Link href="/" /> or <Link href="#/" />?

from wouter.

molefrog avatar molefrog commented on June 2, 2024

hi @neoeno, this is indeed a bug. the href gets transformed using the hrefs() function a few lines above. so I guess we need to keep the original href and store the transformed one somewhere else. feel free to file a PR 💁‍♂️

from wouter.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.