Comments (13)
The basepath support has just landed in the latest 2.4.0
version! Great work, guys, thanks everyone for the help!
from wouter.
Updated the README: https://github.com/molefrog/wouter#i-deploy-my-app-to-the-subfolder-can-i-specify-a-base-path
from wouter.
@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.
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.
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.
@molefrog Should we close the issue?
As far as I understand the problem was solved here: #94
from wouter.
@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.
@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.
i agree!!!! good idea!! 😄
from wouter.
Look great for me! Can't wait to use.
from wouter.
@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.
@omgovich Types have been landed in master
. Can you rename the param?
from wouter.
@molefrog Sure)
from wouter.
Related Issues (20)
- Send the state object with navigate or setLocation HOT 1
- `useSearch` does not work in SSR HOT 5
- `use-browser-location` HOT 2
- React is not re-rendeing page when there is query param change HOT 5
- V3: `memory-location` HOT 1
- V3: Refactor types for location hooks HOT 1
- Decoding URL params HOT 4
- `useSearchParams` for extracting and modifying search parameters HOT 10
- Should `useSearch` contain `?` character? HOT 1
- Route not accessible from multiple routers with different base HOT 1
- Bun install invalid hook call HOT 4
- Router don't work with Preact (10.18.1) HOT 3
- wouter-preact: Params with typescript? HOT 2
- How to add params in a nesting route? HOT 3
- v2.12.1 npm package is out of sync with v2.12.1 tag HOT 1
- v3.0.0-rc.1: When use hash router, Ctrl+click on <Link>, new window is opened with wrong url HOT 3
- Potential `useSearch` bug not triggering updates when used with `urql` HOT 9
- [Bug] Can't match default <Route>Not found</Route> when Router inside Switch HOT 3
- (?) Hash routing with no prefix slash index.html#/example/path/ HOT 3
- useSearch unsafe parameter decoding HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wouter.