Coder Social home page Coder Social logo

Comments (13)

molefrog avatar molefrog commented on April 30, 2024 2

The basepath support has just landed in the latest 2.4.0 version! Great work, guys, thanks everyone for the help!

from wouter.

molefrog avatar molefrog commented on April 30, 2024 1

Updated the README: https://github.com/molefrog/wouter#i-deploy-my-app-to-the-subfolder-can-i-specify-a-base-path

from wouter.

molefrog avatar molefrog commented on April 30, 2024

@giuem Oh yeah, that's a bummer.

You're right since wouter is based on simple useLocation subscription the Link doesn't know anything about the path substitution. It should work well in the app, however I agree, if you need to have semantic links for the SSR that would mess things up. As a temp hack I can offer you to either always use absolute urls everywhere, or write your own Link implementation that takes care of all the transformations needed.

from wouter.

molefrog avatar molefrog commented on April 30, 2024

Another idea is to introduce a new prop on Link component say originalHref (any other suggestions on the name?) that will control the href. So you then could write a helper:

const linkPropsTo = (path) => ({
  href: path,
  originalHref: basePath + path
})

<Link {...linkPropsTo("/users")} />

Just an idea.

from wouter.

giuem avatar giuem commented on April 30, 2024

originalHref sounds great for me! Or maybe we can introduce createLink HOC:

function createLink(basepath = '') {
  function Link(props) {
    // ...
    const href = props.href || props.to;
    const originalHref = basepath + href;
    // ...
  }
  return Link;
}

const Link = createLink(basepath);

<Link href="/users" />

from wouter.

omgovich avatar omgovich commented on April 30, 2024

@molefrog Should we close the issue?
As far as I understand the problem was solved here: #94

from wouter.

molefrog avatar molefrog commented on April 30, 2024

@omgovich Not yet, there are a few things left:

  • Add types that describe the basepath option
  • Document the feature in README (that's on me)

I also haven't decided yet which name to use. Been thinking that base is smaller and will help us to save a couple of extra bytes, but not sure if it's clear enough:

<Router base="/app">...</Router>

Does this look ok @omgovich @giuem @cbbfcd ?

from wouter.

omgovich avatar omgovich commented on April 30, 2024

@molefrog base is used by Vue Router and NuxtJS: https://router.vuejs.org/ru/api/#mode
So I think this is OK

I can rename basepath to base everywhere and send a PR.

from wouter.

cbbfcd avatar cbbfcd commented on April 30, 2024

i agree!!!! good idea!! 😄

from wouter.

giuem avatar giuem commented on April 30, 2024

Look great for me! Can't wait to use.

from wouter.

molefrog avatar molefrog commented on April 30, 2024

@omgovich Ok, thanks. @cbbfcd has just sent a PR with types, we're almost there with merging it. Let's rename the parameter once types land in master.

from wouter.

molefrog avatar molefrog commented on April 30, 2024

@omgovich Types have been landed in master. Can you rename the param?

from wouter.

omgovich avatar omgovich commented on April 30, 2024

@molefrog Sure)

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.