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.
jsximport 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.