1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Fix hashbang route handling for react-router

This commit is contained in:
Bill Thornton 2022-04-23 01:42:42 -04:00
parent 1aeb90d323
commit 05dbeff473

View file

@ -1,5 +1,8 @@
import React, { useLayoutEffect } from 'react';
import { HistoryRouterProps, Router } from 'react-router-dom';
import { Update } from 'history';
const normalizePath = (pathname: string) => pathname.replace(/^!/, '');
export function HistoryRouter({ basename, children, history }: HistoryRouterProps) {
const [state, setState] = React.useState({
@ -7,14 +10,27 @@ export function HistoryRouter({ basename, children, history }: HistoryRouterProp
location: history.location
});
useLayoutEffect(() => history.listen(setState), [history]);
useLayoutEffect(() => {
const onHistoryChange = (update: Update) => {
if (update.location.pathname.startsWith('!')) {
history.replace(normalizePath(update.location.pathname), update.location.state);
} else {
setState(update);
}
};
history.listen(onHistoryChange);
}, [ history ]);
return (
<Router
basename={basename}
// eslint-disable-next-line react/no-children-prop
children={children}
location={state.location}
location={{
...state.location,
pathname: normalizePath(state.location.pathname)
}}
navigationType={state.action}
navigator={history}
/>