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.

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

Fix langservice hashhistory #161

Merged
merged 4 commits into from
Sep 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 26 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -426,7 +426,8 @@ Router component creates a new router instance.
,
[MEMORY](https://github.com/ReactTraining/history/blob/master/docs/api-reference.md#creatememoryhistory)
. For more information, check
the [history library documentation](https://github.com/ReactTraining/history/blob/master/docs/api-reference.md)
the [history library documentation](https://github.com/ReactTraining/history/blob/master/docs/api-reference.md) \
- **isHashHistory** `boolean` _(optional)_ default `false`. If you use `HashHistory`, you must set `isHashHistory` to `true`
- **staticLocation** `string` _(optional)_ use static URL location matching instead of history
- **middlewares** `[]` _(optional)_ add routes middleware function to patch each routes)
- **id** `?number | string` _(optional)_ id of the router instance - default : `1`
Expand Down Expand Up @@ -713,6 +714,7 @@ Array of :
### LangService

Manage `:lang` params from anywhere inside Router scope.
Add `isHashHistory` to `true` if you are using `createHashHistory()` for the router.

```jsx
import { LangService } from "@cher-ami/router"
Expand All @@ -730,9 +732,15 @@ const langService = new LangService({
languages,
showDefaultLangInUrl: true,
base,
//isHashHistory: true // Optional, only if history is hashHistory
})

;<Router langService={langService} routes={routesList} base={base}>
;<Router
langService={langService}
routes={routesList}
base={base}
//isHashHistory={true} // Optional, only if history is hashHistory
>
<App />
</Router>
```
Expand Down Expand Up @@ -772,6 +780,7 @@ constructor object properties:
- `languages`: list on language objects
- `showDefaultLangInUrl`: choose if default language is visible in URL or not
- `base`: set the same than router base
- `isHashHistory`: set to true if hashHistory is used (optional, default false)

```jsx
const langService = new LangService({
Expand Down Expand Up @@ -824,6 +833,15 @@ Return langService init state
const isInit = langService.isInit
```

#### isHashHistory `boolean`

Return isHashHistory state.

```jsx
const isHashHistory = langService.isHashHistory
// true | false
```

#### setLang(toLang: TLanguage, forcePageReload = true) `void`

Switch to another available language. This method can be called in nested router
Expand Down Expand Up @@ -898,6 +916,12 @@ Final routes array used by the router be

Selected history mode. all history API is avaible from this one.

#### Routers.isHashHistory

`boolean`

Return the value set on the Router component

#### Routers.langService

`LangService`
Expand Down
11 changes: 8 additions & 3 deletions examples/example-client/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,19 @@ import "./index.css"
import App from "./App"
import { Router, LangService } from "@cher-ami/router"
import { routesList } from "./routes"
import { createBrowserHistory } from "history"
import { createBrowserHistory, createHashHistory } from "history"

const base = "/base/"
const base = "/"
type TLang = "en" | "fr" | "de"

const isHashHistory = true
const history = isHashHistory ? createHashHistory() : createBrowserHistory()

const langService = new LangService<TLang>({
languages: [{ key: "en" }, { key: "fr" }, { key: "de" }],
showDefaultLangInUrl: false,
base,
isHashHistory,
})

/**
Expand All @@ -22,8 +26,9 @@ const root = createRoot(document.getElementById("root"))

root.render(
<Router
history={createBrowserHistory()}
history={history}
langService={langService}
isHashHistory={isHashHistory}
routes={routesList}
base={base}
>
Expand Down
Loading
Loading