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:
parent
1aeb90d323
commit
05dbeff473
1 changed files with 18 additions and 2 deletions
|
@ -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}
|
||||
/>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue