How do I render a new route that only shows a particular component in a SPA?

user_13337635 0
Viewed 99

I have a landing page that is made up of multiple routes as a single page application. But now I want to add in another route called /dashboard which shows live data from an API so when a user clicks on the button to the dashboard all they see is the contents of the dashboard and not the navbar and the footer above the dashboard.

function App() {
        return (
        <Router>
            <Navbar />
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/process" exact component={Process} />
                <Route path="/products" exact component={Products} />
                <Route path="/team" exact component={Team} />
            </Switch>
            <Footer />
            <Route exact path="/dashboard">
                <Dashboard />
            </Route>
        </Router>
    );

}

Image below is what I am talking about the Navbar and Footer still being visible when clicking on the Dashboard button. It is just displaying the word Dashboard for now. I want it so that only the Dashboard is visible when the user clicks on the Dashboard button.

enter image description here

react-router reactjs
2 Answers

You could wrap your navbar in a route with a render function. Route render

Inside the render function you get access to the match object. Witch has the path and url so you can filter yourself when to render the navbar. match

maybe code like this:

<Route path="*" render={({match}) => {
    if(match.url !== /*something*/){
        return <Navbar />
    }else{
        // return null to skip rendering anything here
        return null
    }
}} />

Edit: maybe shorter, but you have to list all routes:

<Route path={['/', '/process', '/products', '/team']} exact component={Navbar} />

You can also use regex inside path.

user_144352060

Needed to use the match and specify that the Navbar & Footer are not displayed when the path is /dashboard.

Works but maybe there is a more elegant solution.

    return (
        <Router>
            <Route
                path="*"
                render={({ match }) => {
                    if (match.url !== "/dashboard") {
                        return <Navbar />;
                    } else {
                        return null;
                    }
                }}
            />
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/process" exact component={Process} />
                <Route path="/products" exact component={Products} />
                <Route path="/team" exact component={Team} />
            </Switch>
            <Route
                path="*"
                render={({ match }) => {
                    if (match.url !== "/dashboard") {
                        return <Footer />;
                    } else {
                        return null;
                    }
                }}
            />
            <Route
                path="*"
                render={({ match }) => {
                    console.log(match);
                    if (match.url === "/dashboard") {
                        return <Dashboard />;
                    } else {
                        return null;
                    }
                }}
            />
        </Router>
    );
user_133376350
Related