Switch route in React by negation (if the route is different from)

Let's assume that you want to display a React component when the route is different from a certain path.

For example, let's assume that you want to display the navigator when the route is different from /main.

You can use a Regular Expression (RegEx) expression to negate the path: /\/(?!main)/.

This is known as a negative lookahead in Regular Expressions.

jsx
import React             from 'react';
import { Switch, Route } from 'react-router-dom';
import Nav               from './Nav';
import Main              from './Main';
import User              from './User';
import Send              from './Send';

const App = () => {

    return(
        <React.Fragment>
            <Switch>
                <Route       path = {/\/(?!main)/}  component = {Nav}/>
            </Switch>
            <Switch>
                <Route exact path = '/main'         component = {Main}/>
                <Route exact path = '/user'         component = {User}/>
                <Route exact path = '/send'         component = {Send}/>
            </Switch>
        <React.Fragment/>
    );

}

export default App;

The component will display the navigator component in the top of the page if the route is different from /main.

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.