Simple redirection rules and HTTP404 handling

[andyb1979]

I'm sure there's a better way to handle this ...

I wanted to implement some redirection rules for dead pages and HTTP404 handling. I haven't figured out how to set statuscode=404 which is needed

See ./AppRouter/redirectionRules which defines redirection rules

// Redirection URLs from - to
export const REDIRECTION_RULES = new Map<string, string>([
    ["/javascript-ohlc-chart", "javascript-candlestick-chart"],
]);

And App() which processes redirection using

    // Process redirection rules first
    const pathWithoutSlash = location.pathname.endsWith("/") ? location.pathname.slice(0, -1) : location.pathname;
    if (REDIRECTION_RULES.has(pathWithoutSlash)) {
        return <Navigate  to={REDIRECTION_RULES.get(pathWithoutSlash)}/>
    }

Http404 handling is done later on in App() where I have some dodgy logic which needs reviewing

basically

                <AppBarTop toggleDrawer={toggleDrawer} currentExample={currentExample}/>
                {isHttp404 ? <NotFound/> : pageContent}
                <AppFooter/>

which inserts in between the app top bar and footer OR the page content depending on if the URL is recognised or not

There's probably a better way to do this using React Router and <Route path="*"> however I wanted to hide the side menu bar when HTTP404 is detected

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders