Question: 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](https://i.stack.imgur.com/2XyqH.png)](https://i.stack.imgur.com/2XyqH.png)

Answer: 
You could wrap your navbar in a route with a render function. [Route render](https://reactrouter.com/core/api/Route/render-func)

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](https://reactrouter.com/core/api/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.
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>
    );

```