React router built for server side rendering and multi-language support with localized paths
npm install @ossy/router-reactA React router built for server side rendering and multi-language support with localized paths.
What this package tries to do is to lift the responsibility of creating language aware links to a single provider, the
The components that want to trigger a navigation only need to be aware of the pageId (with eventual params) they want to navigate to.
Loading of appropriate data is still the responsibility of the component.
This Router is aimed towards websites that want to prerender as much as possible on the server and therefore doesn't include many client side functionality that you might want for SPAs, like setting search params without doing a full navigation.
router.navigate())- @ossy/router-react
- Features
- What problem does this package solve?
- Installation
- Usage
- Single language website setup
- Multi language website setup
- Server side rendering
- Navigation
- Navigation with params
- Note on default params
- Navigating to specific page in a specific language
- Switching language (same page)
- Navigating back
- Redirects
``tsx`
const MyComponent = () => {
const { org } = useParams()
return (
)
}
This works pretty OK when you only have to worry about one language.
But what happens when you want to add another language with localized paths?
How would that look like inside a component?
`tsx
const MyComponent = () => {
const { language, org } = useParams()
const paths = {
en: {
home: /${org},/${org}/users
users:
},
sv: {
home: ,/${org}/anvandare
users:
}
}
return (
)
}
`
The example above doesn't look too bad, but keep in mind it's only for one extra language and in one component. Imagine doing that everytime you want to navigate?
What this package tries to do is to lift the responsibility of creating language aware links to a single provider, the component.
The components that want to trigger a navigation only need to be aware of the pageId (with eventual params) they want to navigate to.
`tsx
const MyComponent = () => {
const router = useRouter()
return (
)
}
`
To take this one step further, if you were to integrate with a cms you could add the pageId to the data, and you wouldn't need to update the component or data if the paths changes.
In the below example we pretend to load data from a CMS and itterate through navigation links.
In this made up case, the data.navigationLinks.href refers to the pageId.
`tsx
const MyComponent = () => {
const router = useRouter()
const { data } = useDataFromSomeCms()
return (
)
}
`
npm install @ossy/router-react
Usage
$3
tsx
import { Router } from '@ossy/router-react'const pages = [
{ id: 'home', path: '/', element:
Home page },
{ id: 'users', path: '/users', element: Users page },
{ id: 'user', path: '/users/:userId', element: User page },
]
export const App = () => (
My app
)
`$3
Setting up a multi language website is just a matter of providing the
component with some additional information. Both defaultLanguage and supportedLanguages are required for multi language websites. To specify paths for each supported language, provide the page.path key with an object containing key value pairs that corresponds with the language and it's associated path for that page.- When navigating to a page on a multi language site, the language needs to be at the root.
So the urls for a page with the config below becomes
/en/users and /sv/anvandare, both rendering the same element.
`tsx
{
id: 'users',
path: {
en: '/users',
sv: '/anvandare'
},
element: Users page
},
`
- It's then up to the rendered element to read the language from the hook and load appropriate data.
- If users navigate to the root url, the router will redirect to the default language`tsx
import { Router } from '@ossy/router-react'const routerConfig = {
defaultLanguage: ['en'],
supportedLanguages: ['en', 'sv'],
pages: [
{
id: 'home',
path: {
en: '/',
sv: '/',
},
element:
Home page
},
{
id: 'users',
path: {
en: '/users',
sv: '/anvandare'
},
element: Users page
},
{
id: 'user',
path: {
en: '/users/:userId',
sv: '/anvandare/:userId'
},
element: User page
},
]
}
export const App = () => (
My app
)
`$3
- provides no server on it's own.
- Meaning it's up to you wich server framework you choose to use, be it Expressjs or something else.
- Then you can use any of the React dom static methods to actually render the page.
- To provide the active url use the url prop on the router.$3
Navigation is done by getting the
href through router.getHref( and using regular tags to do the actual navigation.`tsx
const router = useRouter()
Users
`#### Navigation with params
To create an href with params, provide
with an options objet.
`tsx
const router = useRouter()
const userId = '111'
User ${userId}
`##### Note on default params
The default params for the
call will be taken from the url.
This means that if a user have navigated to /users/:userId and you want to build a link to
/users/:userId/details, you don't need to supply the userId to the getHref() call since it already exists in the url.#### Navigating to specific page in a specific language
For multi language websites, the default behaviour is that
getHref() returns the href for the active language, This can be overriden by providing the target language in the options object.
`tsx
const router = useRouter()
Home
`#### Hash and search params
To add hash and search params, add them to the end of the pageId.
tsx
const router = useRouter()
Collection
`#### Switching language (same page)
Switching the language of the current page is done by navigating to that route.
To make it easier, if pageId is left out of the getHref call, it will assume you want the current page.
So to make a language switcher could look as easy as this:
const router = useRouter()
English
Swedish
Spanish
#### Navigating back
Backwards navigation can be done with the
methods.
It just calls window.history.back() under the hood.
`tsx
const router = useRouter()
`#### Redirects
You can redirect by setting the redirect field on the page defenition to the pageId you want to redirect to.
The redirect will take place on the client.
In the example below, the
will redirect to /contact.
`tsx
const pages = [
{
id: 'services',
redirect: '@contact',
path: '/services'
},
{
id: 'contact',
path: '/contact'
}
]
``TLDR: It might be in the future.
Right now the source is in a private monorepo with other private packages and workflows.
It's to much of a hassle to break it out right now.