Navigation in React

user_8250795 0
Viewed 35

I am new learning how to use React, I am from the Native Android realm where we use techniques like fragments and Nav component to make our apps transition seamless while maintaining a low footprint. I have never been a good web developer but React's approach is amazing and it has been easy to get around. I have been working a project, because of React's component approach, I designed it in such a way that the AppBar and Footer are in the main Layout and rendered once then all my apps content are what basically changes, below is my layout

return (<ThemeProvider theme={theme}>
    <React.Fragment>
        <ProminentAppBar selectedComponent={setSelectedComponent} />
        <Container maxWidth="lg">
            {getSignInDialog()}
            {getSignUpDialog()}
            {renderSelectedComponent()}
        </Container>
        <Footer />
        <ScrollTop {...props}>
            <Fab color="secondary" size="small" aria-label="scroll back to top">
                <KeyboardArrowUpIcon />
            </Fab>
        </ScrollTop>
    </React.Fragment>
</ThemeProvider>);

When the app is launched, it runs the code above and depending on the renderSelectedComponent the right content is returned, below is the renderSelectedComponent method

   const renderSelectedComponent = () => {
    switch (selectedComponent.component) {

        case Pages.HOME:
            return <Home selectedComponent={setSelectedComponent} />;

        case Pages.VIEW_VACANCY:
            return <ViewVacancy selectedComponent={setSelectedComponent} />;

        case Pages.POST_A_JOB:
            return <PostAVacancy selectedComponent={setSelectedComponent} />;

        case Pages.MY_PROFILE:
            return <Profile selectedComponent={setSelectedComponent} />;

        default:
            return <Home selectedComponent={setSelectedComponent} />;
    }
}

This code works great the only problem is whenever I hit the back button the Tab is closed, from my understanding, it is closed because the browser does not keep a stack of the Navigation, to the browser, the app is still showing the same content it first showed when it loaded. How can I make the browser keep track of changes so that when I hit back the previous content is displayed?

react-hooks reactjs
1 Answers

Like @Visakh Vijayan pointed out, router API was the way to go. Turns out I over engineered a lot of things, so I changed my renderSelectedComponent to this

const getRoutes = () => {
    return (
        <Switch>
            <Route path={HOME_PAGE_LINK} exact render={props =>
                (<Home {...props}
                    selectedComponent={setSelectedComponent}
                />)} />
            <Route path={VIEW_VACANCY_LINK} exact render={props =>
                (<ViewVacancy  {...props}
                    selectedComponent={setSelectedComponent} />)}
            />
            <Route path={CREATE_VACANCY_LINK} exact render={props =>
                (<PostAVacancy {...props}
                    selectedComponent={setSelectedComponent} />)}
            />
            <Route path={PROFILE_LINK} exact render={props =>
                (<Profile selectedComponent={setSelectedComponent} />)}
            />
        </Switch>)
}

And my Layout to this

  return (<ThemeProvider theme={theme}>
    <React.Fragment>
        <Router>
            <ProminentAppBar selectedComponent={setSelectedComponent} />
            <Container maxWidth="lg">
                {getSignInDialog()}
                {getSignUpDialog()}
                {getRoutes()}
            </Container>
            <Footer />
            <ScrollTop {...props}>
                <Fab color="secondary" size="small" aria-label="scroll back to top">
                    <KeyboardArrowUpIcon />
                </Fab>
            </ScrollTop>
        </Router>
    </React.Fragment>
</ThemeProvider>);

Some may be wondering why I have kept the setSelectedComponent reference, I still use it to pass data around and get triggers. Thanks!

user_82507950
Related