ABTSoftware / SciChart.JS.Examples

MIT License
76 stars 36 forks source link

Simple redirection rules and HTTP404 handling #177

Open andyb1979 opened 1 year ago

andyb1979 commented 1 year ago

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[bot] commented 1 year ago

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